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

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

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

评论(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>