日常項(xiàng)目中，后端傳圖不規(guī)則，比例大小不一。前端又要去做適應(yīng)，是一個(gè)讓人非常頭大的問(wèn)題。

總結(jié)了一個(gè)不規(guī)則圖片不變形的解決方案：

注：先寫(xiě)一個(gè)長(zhǎng) 300px 寬 200px 帶邊框的 div ，圖片接近方形，實(shí)現(xiàn)圖片正常顯示不變形。

<div class="box box1">
    ...
</div>

1、背景圖法

通過(guò)背景圖的 background-position 屬性，可以使圖片居中顯示。國(guó)外一些網(wǎng)站有看到類(lèi)似的案例，簡(jiǎn)單好操作。

.box1{
    background: url("https://hbimg.huabanimg.com/42d38784a9e5ad1cbce090966a7a87c274f5d27ba616-VMBaO0_fw658") no-repeat center center;
    background-size: auto 100%;
}

這樣可以顯示完整的圖片，不變形：

image.png

若要圖片填滿(mǎn)容器，可以將 background-size 屬性改為 100% auto ：

background-size: 100% auto;

如下圖：

image.png

同樣 background-size 的 contain （完整顯示）和 cover （填充）屬性也能起到相同的效果。

2、object-fit

object-fit CSS 屬性指定可替換元素的內(nèi)容應(yīng)該如何適應(yīng)到其使用的高度和寬度確定的框，不支持IE。

可用屬性：

fill 不保持縱橫比縮放圖片，使圖片完全適應(yīng)

contain 保持縱橫比縮放圖片，使圖片的長(zhǎng)邊能完全顯示出來(lái)

cover 保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來(lái)

none 保持圖片寬高不變

scale-down 當(dāng)圖片實(shí)際寬高小于所設(shè)置的圖片寬高時(shí)，顯示效果與none一致；否則，顯示效果與contain一致

inherit 繼承

initial 默認(rèn)值

unset 繼承父元素，若父元素沒(méi)有屬性則顯示默認(rèn)值

image.png

CSS：

ul>li>img{
    width: 150px;
    height: 100px;
}
ul>li:nth-child(1)>img{
    object-fit: fill;
}
ul>li:nth-child(2)>img{
    object-fit: contain;
}
ul>li:nth-child(3)>img{
    object-fit: cover;
}
ul>li:nth-child(4)>img{
    object-fit: none;
}
ul>li:nth-child(5)>img{
    object-fit: scale-down;
}

3、flex

該方法也可以實(shí)現(xiàn)以上兩種方法的效果。

以容器寬 200px 高 300px ，圖片為方形為例：

設(shè)置 width: 100% 為圖片完整顯示，多出部分留白。

設(shè)置 height: 100%; 為圖片全部填充，這時(shí)候需要給圖片的容器添加 overflow: hidden; 屬性，防止圖片超出。

圖片等比例縮放，多余部分，還有就是要考慮IE兼容問(wèn)題，可以在手機(jī)端項(xiàng)目中使用。

ul{
    display: flex;
}
ul li{
    width: 200px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #23caff;
    margin: 20px;
        overflow: hidden;
}
img{
    width: 100%;
}

4、js 方法

js 方法應(yīng)該比較通用，可以兼容多版本瀏覽器。

var img = document.getimgmentById("img");
var div = document.getimgmentById("div");
img.onload = function () {
  if (img.naturalHeight < div.offsetHeight) {
    img.style.width = "auto";
    img.style.height = "100%";
  }
}

5、jQuery方法

也可以兼容多版本瀏覽器，需要 jQuery 加持。

var $tabLi = $("#tab").find("ul li"),
  length = $tabLi.length,
  liWidth = $tabLi.width(),
  propArr = [];
$tabLi.each(function (i) {
  var $img = $(this).find("img");
  var width = $img.width();
  width?imgLoad.call($img[0]):($img[0].onload = imgLoad);
  function imgLoad() {
    var width = $(this).width();
    var height = $(this).height();
    propArr[i] = width/height;
    this[width>height?"width":"height"] = liWidth;
    for (var j = 0; j < length; j++)if ( !propArr[j] )return;
  }
});

6、一個(gè)原始的方法

圖片等比例縮放，多余部分空白填補(bǔ)：

ul li {
    width: 200px;
    height: 200px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    border: 1px solid red;
}

ul li img {
    max-height: 100%;
    max-width: 100%;
}

參考

img固定寬度和高度，不規(guī)則圖片變形問(wèn)題的解決方法-HTML筆記-w3h5-Web前端開(kāi)發(fā)資源網(wǎng)