JavaScript-如何设置背景图很大但是resize浏览器时候自动适应不出现滚动条?

服务器管理 服务器管理 主题:1035 回复:2217

JavaScript-如何设置背景图很大但是resize浏览器时候自动适应不出现滚动条?

夜无邪 发布于 2017-03-23 字数 0 浏览 1112 回复 4

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(4

灵芸 2017-08-06 4 楼

获取图片的id,然后用js设置其相对应浏览器屏幕的高度及宽度为图片的高和宽
如设置宽不出现滚动条:
document.getElementById("xx").width=window.screen.Width - 40

瑾兮 2017-07-01 3 楼

img.source-image {

width: 100%;
position: absolute;
top: 0;
left: 0;

}

在 css 里直接设定背景图片宽度的百分比,这是这个方法的效果

瑾兮 2017-04-30 2 楼

推荐一个jquery实现的教程,可以满足你的需求:
http://manos.malihu.gr/fullscreen-background-image-with-jquery

演示效果在这里:
http://manos.malihu.gr/tuts/fullscreen-backgound-image-with-jquery.html

晚风撩人 2017-04-09 1 楼

给你个例子代码试试看:

<SCRIPT LANGUAGE="JavaScript">
<!--
/**

  • heightMargin 高度对页内边距的距离。

  • widthMargin 宽度对页内边距的距离。

  • minHeight 最小高度。

  • minWidth 最小宽度。
    */
    function resizePic(heightMargin, widthMargin, minHeight, minWidth) {
    var height = $(document.body).height() - heightMargin;
    var width = $(document.body).width() - widthMargin;

    height = height < minHeight ? minHeight : height;
    width = width < minWidth ? minWidth : width;

    this.height = height;
    this.width = width;
    }

var picId = 'pictureId'; 
$(window).resize(function() {  
    $('#' + picId).resizePic(130, 40, 400, 800);  
});  

//-->
</SCRIPT>