JZTXT

CSS实现图片自适应布局，且不拉伸变型

发布时间 2023-06-25 13:48:56作者: 阿宇爱吃鱼

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:e�xpression(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 属性

.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文件，是根据下方地址，从网上保存到本地

②

html:

<div>
  <section>
    <figure>
      <img class="img-cover" src="image.jpg">
    </figure>
  </section>
</div>

style:

.img-cover {
        height: 300px;
        width: 300px; 
        object-fit: cover;
        font-family: 'object-fit: cover';
    }

script:

<script src="./dist/ofi.min.js"></script>
<script src="./dist/picturefill.min.js"></script>
<script type="text/javascript">
    objectFitImages(false, {
        watchMQ: true,
        skipTest: ''
    });
</script>

另一种引用方式参考：https://blog.csdn.net/weixin_45548211/article/details/107819078

最终效果参考线上少儿活动平台：https://activity.zhongzhilian.com.cn/