使用img标签自适应，各个尺寸图片不变形-------css3：object-position/object-fit属性

川长思鸟来 2024-04-17 22:22 10阅读 0赞

> > 最近使用img标签放图片，图片拉伸严重变形，所以就找了找资料，发现css3已经解决了这个问题，它推出了两个属性：object-position/object-fit，这两个属性可以随意存放各个尺寸的照片并使图片不变形

**一、object-fit：控制图片展示状态**  
object-fit一共有五个对应值，分别是：

*  fill: “填充”。默认值。使图片拉伸填满整个容器, 不保证保持原有的比例。
 *  contain: “包含”。保持原有尺寸比例缩放。保证整个图片都可以出现在容器中。因此，此参数可能会在容器内留下空白。
 *  cover: “覆盖”。保持原有尺寸比例缩放。宽度和高度至少有一个和容器一致（尺寸小的一致）。因此，此参数可能会让图片部分区域不可见。
 *  none: “无”。保持原有尺寸比例。同时保持图片原始尺寸大小。多出的部分隐藏。
 *  scale-down: “降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

注意：scake-down具有动态属性：当实际图片尺寸大于容器尺寸时，表现为contain属性的结果；当实际图片尺寸小于容器尺寸时，表现为none属性的结果

接下来我会提供下每个属性的结果：  
原图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTA5MTMz_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTA5MTMz_size_16_color_FFFFFF_t_70 1]

**二、object-position：控制图片展示位置**

object-position属性可以控制图片的展示位置，比如下图有很多留白，如果我们想让最主要的内容展示出来，就可以用这个属性控制图片位置；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTA5MTMz_size_16_color_FFFFFF_t_70 2]

**三、附上测试源码**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .img_class{
                width: 300px;
                height: 300px;
                border: black 1px solid;
                background-color:darkgrey ;
            }
            .one_class{
                object-fit: fill;
            }
            .two_class{
                object-fit: contain;
                object-position: left 0px bottom 100px;
            }
            .three_class{
                object-fit: cover;
            }
            .four_class{
                object-fit: none;
                object-position: left 100px bottom 100px;
            }
            .div_class{
                width: 350px;
                float: left;
            }
            .div_class span{
    
            }
        </style>
    </head>
    <body>
       <div class="div_class">
           <span>未加object-fit属性时</span>
           <img  class="img_class" src="./img/timg%20(1).jpg">
       </div>
       <div class="div_class" >
           <span>object-fit:fill</span>
           <img  class="img_class one_class" src="./img/timg%20(1).jpg">
       </div>
       <div class="div_class ">
           <span>object-fit: contain;</span>
           <p>object-position: left 0px bottom 100px;</p>
           <img  class="img_class two_class" src="./img/timg%20(1).jpg">
       </div>
       <div class="div_class">
           <span>object-fit: cover;</span>
           <img  class="img_class three_class" src="./img/timg%20(1).jpg">
       </div>
       <div class="div_class">
           <span> object-fit: none;</span>
           <p>object-position: left 100px bottom 100px;</p>
           <img  class="img_class four_class" src="./img/timg%20(1).jpg">
       </div>
    </body>
    </html>

**注意：图片位置自己改下**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTA5MTMz_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/909eed2983d44ab6ac287c77df709a0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTA5MTMz_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/63a21b4991ff4321acc8c22940bcc723.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTA5MTMz_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/71c00ae475644fada89dbaaf35114d64.png