div设置背景图片,不重复不变形，还可根据不同屏幕的宽度，自适应高度

效果：
宽度变窄，高度相应比例变窄

宽度变宽，高度相应比例变宽

高度与宽度无法直接自适应，需要找一个中间的属性相串联。
宽度的自适应是根据viewport的width来调整的。
padding
padding是根据viewport的width来调整的。
padding-top和padding-bottom也是根据viewport的width来跳转的。

那么我们可以通过 padding-bottom属性来间接和width进行自适应。
padding-bottom的值 = (图片高/图片宽)
假设图片像素为1920*1080，则padding-bottom值 = （1080/1920） = 56.25%

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="backgroundImg"></div>
</body>
<style>body{margin: 0;/*去除div和body之间的间隔*/}#backgroundImg{width: 100%;background: url("pc.jpg") no-repeat;/*no-repeat:背景图将不会被重复*/background-size: cover;/*背景图片放大到适合元素容器的尺寸，图片比例不变.背景图像的某些部分可能无法显示在背景定位区域中。*/padding-bottom: 56.24%;/*起到的效果是让宽度与高度关联,具体数值=(图片高/图片宽)*//*图片分辨率为1202*676 约为56.24%*/}
</style>
</html>

div设置背景图片自适应相关推荐

HTML 设置背景图片自适应
HTML 设置背景图片自适应 background: url(xxx.png) no-repeat fixed; background-size:100% 100%;
用css使用html设置背景图片自适应,CSS怎么设置背景图片自适应全屏？附源码！...
不少同学在设置网站背景图片时会遇到这么一个问题:背景图片总是不能铺满整个屏幕,不是图片太小就是图片被过度放大,显得不太美观.那么 CSS 怎么设置背景图片自适应全屏呢?这篇文章告诉你. 实现效果: 源 ...
YDOOK : CSS div 设置背景图片大小自动缩放
YDOOK : CSS div 设置背景图片大小自动缩放设置示例: 选择器{width:100%;height:100%;background-repeat:no-repeat:background ...
css怎么设置背景图片自适应大小
在css中,可以利用"background-size"属性设置背景图片自适应大小,该属性用于设置背景图片的大小,只需要给背景图片元素添加"background-size: ...
css设置背景图片自适应
CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ backg ...
html设置背景图片自适应
在<body>中设置: <body background="images\bg.jpg" style=" background-repeat:no-re ...
css设置背景图片自适应（转）
body{background-image: url("../img/deng_lu.jpg");background-repeat:no-repeat;background-si ...
background-size设置背景图片自适应在ie8下失效的问题
遇到的问题是 :有一个div ,div用绿色框体现.然后通过js控制框的大小,实现动态的改变div的大小. (放大缩小窗口,div跟随变大变小.) 设置了div的css属性 background-i ...
web前端开发人员要求，css设置背景图片自适应
为什么要写这篇文章从一开始手指冒汗被怼的说不出话,到最后和面试官侃侃而谈游刃有余,我发现:同样的能力水平,在不同的面试表现下,反馈到面试官眼中的结果可以有着天壤之别. 因此,如果你希望把自己的真实水 ...

div设置背景图片自适应

div设置背景图片,不重复不变形，还可根据不同屏幕的宽度，自适应高度

div设置背景图片自适应相关推荐

最新文章

热门文章