如何在顯示圖片縮略圖時不擠壓拉伸圖片

前言：我們在前端顯示圖片縮略圖的時候，會遇到不清楚圖片的尺寸，然後使用固定高寬比的img來顯示圖片，這樣會導致高寬比不一致的圖片會被擠壓拉伸。本文站以前端小白的視角來探討這種問題的解決方案。

方案一 max-width和max-height

使用max-width和max-height來做，這種情況下不能保證每一張圖片預覽都是相同寬高的，但是卻不會擠壓拉伸圖片。

如下圖，二、三張圖片的寬高一致，沒什麼問題，一、四、五、六張圖片明顯被擠壓或者拉伸。

樣式：

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之後的效果：

樣式：

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

三張圖片的顯示比較正常了，但是高度沒有達到450px,但是保留了完整圖片的預覽，這種方式是比較簡單的解決方法，如果想要一致的寬高，那麼就需要裁剪圖片了。下面的幾種方案都是涉及裁剪的方案。

下面的三種方案以下圖爲例：

方案二 使用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實現效果：

contain實現效果：

方案三 使用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的效果：

object-fit: contain的效果：

方案四 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);

效果：

方案五 懶人必備 jqthumb庫

功能比較豐富，使用簡單，詳見jqthumb

能夠實現的效果：