两种方式各有各的优势和短板:
一:也是大家最经常用的,如下:
<div style="width: 4.0rem;background: red;">
<img data-echo="assets/img/bmw_m1_hood.jpg" src="assets/img/grey.gif" alt="" style="width: 100%;">
</div>
这种方式优势在于:
1,可以结合flexble等手机适配框架实现手机端的适配 (width: 4.0rem;)
2,可以结合echo.js或者lazyload.js等懒加载插件
备注:懒加载时style="width: 100%;"是必须要设置的
这种方式短板也很明显:
1,高度是自适应宽度的变化的,所以不能实现等比例裁剪,比如1:1;2:3。。。。
2,如果很多同类图片同时使用,需要美工做同样尺寸的图片
二:利用css的background:url()属性,如下:
html部分:
<div style="width: 4.0rem;background: red;">
<div class="zsimage"></div>
</div>
css部分:
.zsimage{
background: url(../../../assets/img/bmw_m1_hood.jpg);
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size: cover;
}
备注:设置比例时直接对 width: 100%;和padding-bottom: 100%;进行设置就好,比如目前都是100%也就是1:1
如果设置为width: 100%;padding-bottom: 50%;就是2:1
这种方式的优势在于:
1,可以在不拉伸图片的情况下,按比例裁剪图片
2,无论什么尺寸的图,不需要美工处理,可实现自行裁剪
短板也很明显:
1,不能做懒加载处理