css背景图片自适应属性整理,css背景设置图
css背景图片自适应属性整理,css背景设置图
本方法适用图片尺寸不一，且需要根据页面大小实现自适应等比缩放的情况；
之前一直用的是背景图的方式来实现这个效果，可以这样做的一个弊端是不利于SEO 的优化，所以决定换种方式写，综网上搜出来的文章，写了这个教程，供新手学习使用。
实现样式：
demo1
先上代码：
HTML结构
<div class=wide>
<div class=img-wrap>
<div>
<img src=./test_img.jpg />
</div>
</div>
<p class=goods-name>商品名称</p>
</div>
CSS样式
.wide {
width: 60%;
height: auto;
margin: 0 auto;
border: 1px solid #f2f2f2;
}
.wide .goods-name {
width: ;
height: 28px;
font-size: 14px;
padding: 0 10px;
box-sizing: border-box;
background-color: #fff;
}
.img-wrap { /*重点从这里开始*/
width: ;
height: 0;
padding-bottom: 60%;
overflow: hidden;
position: relative;
background-color: lightgray;
}
.img-wrap > div {
width: ;
height: ;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.img-wrap > div img {
width: auto;
height: auto;
max-width: ;
max-height: ;
}
简要说明：
1、.img-wrap 的 padding百分比值是相对于宽度的，这样我们就可以按照图片的比例来设置高度啦！height=0,padding-bottom= 正好是一个正方形（这里设置为60%）；设置相对定位是为了 能够使子元素 基于它设置宽高（这样padding的值会计算在内，不然子元素的高度设置百分比时只会是我们写的‘height: 0’）;
2、图片宽高 { width: auto; height: auto; max-width: ; max-height: ; } 这样图片可以自适应按父元素宽高等比例显示；
3、此图片自适应就写好了，下面就是居中；
4、居中的方法很多；我这里用了flex布局，很容易就可以实现，如果要兼容IE和多版本浏览器请用其它居中方法实现；
补充：在设置图片时，可以把宽、高都设置成，然后使用CSS比较新的属性 object-fit 来实现图片按比例自适应居中显示。
css