如何在显示图片缩略图时不挤压拉伸图片

小鱼儿 2022-01-12 01:13 491阅读 0赞

文章来源于：[https://blog.csdn.net/yypsober/article/details/79468095][https_blog.csdn.net_yypsober_article_details_79468095]

前言：我们在前端显示图片缩略图的时候，会遇到不清楚图片的尺寸，然后使用固定高宽比的img来显示图片，这样会导致高宽比不一致的图片会被挤压拉伸。本文站以前端小白的视角来探讨这种问题的解决方案。

方案一 max-width和max-height  
使用max-width和max-height来做，这种情况下不能保证每一张图片预览都是相同宽高的，但是却不会挤压拉伸图片。

如下图，二、三张图片的宽高一致，没什么问题，一、四、五、六张图片明显被挤压或者拉伸。

![这里写图片描述][70]

样式：

img {
        width: 450px;
        height: 450px;
    }
    
    <img src="timg.jpg"/>
    <img src="timg%20(1).jpg"/>
    <img src="timg%20(2).jpg"/>
    <img src="timg%20(3).jpg"/>
    <img src="timg%20(4).jpg"/>
    <img src="timg%20(5).jpg"/>

修改成max-width和max-height之后的效果：   
![这里写图片描述][70 1]  
样式：

img {
        max-width: 450px;
        max-height: 450px;
    }

三张图片的显示比较正常了，但是高度没有达到450px,但是保留了完整图片的预览，这种方式是比较简单的解决方法，如果想要一致的宽高，那么就需要裁剪图片了。下面的几种方案都是涉及裁剪的方案。

下面的三种方案以下图为例：   
![这里写图片描述][70 2]

### 方案二 使用background-size属性的cover值或者contain ###

<div class="container"></div>
    
    .container {
        width: 150px;
        height: 100px;
        background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }
    
    .container {
        width: 150px;
        height: 100px;
        background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

按照单词的字面意思：

*  cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
 *  contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 这种方式类似与第一种实现。

cover实现效果：   
![这里写图片描述][70 3]

contain实现效果：   
![这里写图片描述][70 4]

### 方案三 使用CSS3的object-fit属性 ###

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />
    
    .cover {
      object-fit: cover; // contain
      width: 50px;
      height: 100px;
    }

object-fit CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。   
这个属性的值有以下几种：

fill：被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。相当于固定宽高下未做任何调整的样式。

contain：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。和backgroud-size属性的contain类似，只是多了黑边。

cover：被替换的内容大小保持其宽高比，同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。和background-size属性的cover类似。

none：被替换的内容尺寸不会被改变。

scale-down：内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。

object-fit: cover的效果：

![这里写图片描述][70 5]

object-fit: contain的效果：

![这里写图片描述][70 6]

### 方案四 container包裹，设置overflow:hidden ###

<div class="container"><img src="http://i.stack.imgur.com/2OrtT.jpg" /></div>
    .container {
        width: 300px;
        height: 200px;
        display: block;
        position: relative;
        overflow: hidden;
    }
    
    .container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

居中图片（jQuery）：

var conHeight = $(".container").height();
    var imgHeight = $(".container img").height();
    var gap = (imgHeight - conHeight) / 2;
    $(".container img").css("margin-top", -gap);

效果：   
![这里写图片描述][70 7]

### 方案五 懒人必备 jqthumb库 ###

功能比较丰富，使用简单，详见[jqthumb][]

能够实现的效果：

![è¿éåå¾çæè¿°][70 8]

作者：yypsober   
来源：CSDN   
原文：https://blog.csdn.net/yypsober/article/details/79468095

[https_blog.csdn.net_yypsober_article_details_79468095]: https://blog.csdn.net/yypsober/article/details/79468095
[70]: /images/20220109/065dc88a9c8e44608102bca1092dcda8.png
[70 1]: /images/20220109/ce5ec43cd26d4e02a9d1b2e5e6cfdb28.png
[70 2]: /images/20220109/b73aa6834e2d4b96b444c738816a324f.png
[70 3]: /images/20220109/2442ea9a73f8449ba2b363f33e9f1b0a.png
[70 4]: /images/20220109/a5bc29fe5ba9485f976fb770dda65711.png
[70 5]: /images/20220109/0ecea2202246494482c6f56153ceb566.png
[70 6]: /images/20220109/f284ee382c3e41498d1aac3fae56506c.png
[70 7]: /images/20220109/8bb33b4a07a741bbb40e28fb626e81ba.png
[jqthumb]: https://github.com/pakcheong/jqthumb
[70 8]: /images/20220109/6990c6a1fc42420197bb0a24d6315af3.png