在頭條IT學堂看到CSS完美解決前端圖片變形問題的文章，就記錄分享下：
一、讓圖片的寬度或者高度等於容器的寬度或高度，多余的裁掉，然后讓圖片居中：
<style type="text/css"> div{ width: 200px; height: 200px; overflow: hidden; border: 2px solid red; position: relative;
} img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
</style>
<div>
<img src="1.png">
</div>
<br>
<div>
<img src="1.jpg">
</div>
效果圖：
如果圖片的寬度限制了，高度大於等於容器的高度，就會填滿整個容器，但是如果圖片高度小於容器高度，就會出現空白，固定高度同理。此方法是最簡單也最實用，配合后台裁切，更加完美。
二、讓圖片始終顯示在容器內，並且居中顯示。這種方法不會裁切圖片，可以說是上面的升級版。
<style type="text/css"> div{ width: 200px; height: 200px; border: 2px solid red; position: relative;
} img{ max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
</style>
<div>
<img src="1.png">
</div>
<br>
<div>
<img src="1.jpg">
</div>
效果圖如下：
可以看到，無論是寬度超過容器，還是高度超過容器，還是寬高都不超過容器，都能全部居中顯示在容器內，不會裁切。
三、將圖片變成背景，通過改變背景尺寸等可以任意改變圖片在容器中顯示的效果，操作是最方便的：
<style type="text/css"> div{ width: 200px; height: 200px; border: 2px solid red; background-repeat: no-repeat; background-position: center; background-size: cover;
}
</style>
<div style="background-image: url(1.jpg);"></div>
效果圖如下：
通過上圖更改background-size，我們可以看到方法一和方法二都能輕松實現。而且，最后一種cover效果是最理想的，即居中顯示，占滿整個容器並且不變形。這種方法如果不考慮seo的話，用起來還是很順手的。但是，如果您是資訊站、圖片展等等，千萬不要用這種方法，否則你的圖片將很難被搜索引擎收錄。
四、如果有什么方法，即能實現第三種方法的效果，又能兼顧SEO就好了。這里就要隆重推出：object-fit和object-position。你可以這么理解，object-position相當於background-position，它的默認值是50% 50%，也就是居中，所以一般不寫，加了object-fit，默認就居中了。而object-fit，相當於background-size，即圖片填充方式（這里不是圖片大小）。
<style type="text/css"> div{ width: 200px; height: 200px; border: 2px solid red;
} img{ width: 100%; height: 100%; object-fit: cover;
}
</style>
<div>
<img src="1.jpg">
</div>
效果圖如下：
通過上圖，我們幾乎看到了和用背景方法設置效果幾乎一模一樣的結果。可以這么說，這就是背景方法的翻版，並且還可以避免背景圖不會被搜索引擎不收錄缺點。如果不考慮兼容IE，為什么不用這種方法呢。媽媽再也不用擔心編輯亂上傳圖片了！
注意：圖片一定要設置寬高，否則設置object-fit無效。將圖片設置為何容器一樣的寬高就可以了。容器也不需要設置溢出隱藏，object-fit會自動隱藏超出圖片的寬高部分。