1.通过背景图的方式处理图片( 通过 background-size 作用在容器上 )
.img_background{
width:300px;
height:300px;
background-image:url( ' image.jpg' );
background-repeat:no-repeat; //是否平铺
background-position:center center;//设置背景图像的起始位置
background-size:cover;//规定背景图像的尺寸
}
效果:图片虽没有变形拉伸,但最终呈现的效果并不是我们想要的(同object-fit:none)
2.对图片使用max-width: 300px或max-height: 300px,更适用于有固定宽高的div使用
但这样存在一个问题,如果按照宽度缩放,但图片过高会超出溢出盒子,这个时候需要对父级使用overflow:hidden隐藏超出图片内容。
但是使用max-width或max-height,IE6不支持,我们需要设置expression表达式进行判断:
width:expression(this.width > 300 ? "300px" : this.width);
或者height:expression(this.height>100?"100px":this.height);
解决IE6不支持兼容max-height、min-height CSS样式参考:
http://www.divcss5.com/jiqiao/j299.shtml
http://www.divcss5.com/wenji/w194.shtml
补充知识:
expression是在IE5版本之后支持使用的,用来把CSS属性和Javascript脚本关联起来,是动态设置CSS属性的强大方法。 但如果不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高。
CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
3.对图片使用object-fit:cover 属性(注意:小程序不支持该属性,使用mode="aspectFill"可实现)
.img_background{
width: 100%;
height: 100%;
object-fit: cover;
}
补充知识:
(1).object-fit属性具体有5个值:
fill: 默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白。
cover: 保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见。
none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
(2)下面这个图可以看到,这个属性在ie浏览器全系列上都不兼容
解决object-fit兼容IE浏览器实现图片自适应
我的解决办法是:引入object-fit-images ( https://github.com/fregante/object-fit-images )
①在项目中新建dist文件夹
dist中的picturefill.min.js文件,是根据下方地址,从网上保存到本地
②具体代码
<div>
<section>
<figure>
<img class="img-cover" src="image.jpg">
</figure>
</section>
</div>
.img-cover {
height: 300px;
width: 300px;
object-fit: cover;
font-family: 'object-fit: cover';
}
<script src="./dist/ofi.min.js"></script>
<script src="./dist/picturefill.min.js"></script>
<script type="text/javascript">
objectFitImages(false, {
watchMQ: true,
skipTest: ''
});
</script>