img 显示固定部分，超过部分隐藏，不压缩，不变形 (实用，赞）

本是古典何须时尚 2022-01-23 14:55 414阅读 0赞

原文出处：[https://blog.csdn.net/weixin\_42861240/article/details/88657725][https_blog.csdn.net_weixin_42861240_article_details_88657725]

不知大家在做前端页面的时候，有没有遇到类似这样的问题：有一个不是正方形的图片，可能是宽度大于高度的，也可能是高度大于宽度的，而你又并不想用背景图的方式来做，要实现用img标签来让此图片显示出一个正方形的且不变形的效果。即如下图：只显示图片中间部分（红框部分）  
![在这里插入图片描述][1048036-20180206151830857-1002784823.jpg]  
下面我们便来简单讨论如何实现让长方形图片显示出正方形的效果，首先我们本次讨论中用到的两张图片的原图就是上面的两张图片（一张宽度大于高度，另一张高度大于宽度）  
**1、背景图显示正方形效果的做法**  
首先还是从背景图的做法说起，遇到类似的问题，我们大部分人首先想到的是，能用背景图片做的话，就直接用背景图片来做了，至少我是这么想的。那么用背景图的方式是怎么做的，代码还是写一下如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>背景图的做法</title>
        <style>
            .bg-img1 {
                width: 200px;
                height: 200px;
                background: url("images/img1.jpg") center;
                background-size: contain;
            }
            .bg-img2 {
                width: 200px;
                height: 200px;
                background: url("images/img2.jpg") center;
                background-size: cover;
            }
        </style>
    </head>
    <body>
        <h3>背景图的做法</h3>
        <div class="bg-img1"></div>
        <br>
        <div class="bg-img2"></div>
    
    </body>
    </html>

![在这里插入图片描述][1048036-20180206153343295-869322764.jpg]  
**2、img标签显示正方形效果的做法**  
首先、也是需要设置img标签的宽度和高度是一致的，另外需要用到一个关键的css属性——object-fit:cover。下面还是直接贴出代码:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>img标签的做法</title>
        <style>
            .img-1 {
                width: 200px;
                height: 200px;
                object-fit: cover;
            }
            .img-2 {
                width: 200px;
                height: 200px;
                object-fit: cover;
            }
        </style>
    </head>
    <body>
    <h3>img标签的做法</h3>
    <img src="images/img1.jpg" class="img-1">
    <br>
    <img src="images/img2.jpg" class="img-2">
    </body>
    </html>

![在这里插入图片描述][1048036-20180206152601607-2109490969.jpg]  
**3、object-fit的其它值**  
那么object-fit属性还有哪些值呢？  
　　object-fit: fill;  
　　object-fit: contain;  
　　object-fit: cover;  
　　object-fit: none;  
　　object-fit: scale-down;

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。  
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。  
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见（上面讲解的例子就是如此）。  
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。  
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。  
![在这里插入图片描述][1048036-20180206152833826-393488812.jpg]

[https_blog.csdn.net_weixin_42861240_article_details_88657725]: https://blog.csdn.net/weixin_42861240/article/details/88657725
[1048036-20180206151830857-1002784823.jpg]: /images/20220123/ce080a5b724b40cb9db26605d8725346.png
[1048036-20180206153343295-869322764.jpg]: /images/20220123/4406135eb2994af09c0e6419410a973c.png
[1048036-20180206152601607-2109490969.jpg]: /images/20220123/1754ea9326d14c06a9f28510eb9a1336.png
[1048036-20180206152833826-393488812.jpg]: /images/20220123/d48a1fd3cda2499bb64a76cb7964dd57.png