看了這個終於可以利用CSS完美解決前端圖片變形問題

有時候很困惑，明明佈局的時候，很完美，但是掉完數據，就明顯難看了，尤其是圖片在佈局的時候，要麼寫死了寬高，導致後臺調出的圖片比例不對，變形了，要麼就沒有限制寬高或者只限制了寬和高，導致圖片將佈局撐變形了。今天，小編就來總結下，前端保證調出來的圖片不變形的方法。當然，後臺也可以在上傳圖片的時候進行處理，這不在討論範圍內。

一、讓圖片的寬度或者高度等於容器的寬度或高度，多餘的裁掉，然後讓圖片居中：

<style><br>div{<br>\twidth: 200px;<br>\theight: 200px;<br>\toverflow: hidden;<br>\tborder: 2px solid red;<br>\tposition: relative;<br>}<br>img{<br>\twidth: 100%;<br>\tposition: absolute;<br> top: 50%;<br> left: 50%;<br> transform: translate(-50%, -50%); <br>}<br>/<style>

\t 





\t 

效果圖如下：

css設置圖片

如果圖片的寬度限制了，高度大於等於容器的高度，就會填滿整個容器，但是如果圖片高度小於容器高度，就會出現空白，固定高度同理。此方法是最簡單也最實用，配合後臺裁切，更加完美。

二、讓圖片始終顯示在容器內，並且居中顯示。這種方法不會裁切圖片，可以說是上面的升級版。

<style><br>div{<br>\twidth: 200px;<br>\theight: 200px;<br>\tborder: 2px solid red;<br>\tposition: relative;<br>}<br>img{<br>\tmax-width: 100%;<br>\tmax-height: 100%;<br>\tposition: absolute;<br> top: 50%;<br> left: 50%;<br> transform: translate(-50%, -50%); <br>}<br>/<style>

\t




\t 

效果圖如下：

max-width控制圖片

可以看到，無論是寬度超過容器，還是高度超過容器，還是寬高都不超過容器，都能全部居中顯示在容器內，不會裁切。

此外，藉助JS也能實現這種效果：即當圖片的寬度大於高度，則設置圖片的寬度為100%，如果圖片的高度大於寬度，則設置高度為100%，這裡僅僅進行討論，實戰中，並不使用這種方法（能用css實現的，就不要用js了嘛）。為了方便，這裡藉助了jQuery，記得引入jQuery哦！

\t




\t 

三、將圖片變成背景，通過改變背景尺寸等可以任意改變圖片在容器中顯示的效果，操作是最方便的：

<style><br>div{<br>\twidth: 200px;<br>\theight: 200px;<br>\tborder: 2px solid red;<br>\tbackground-repeat: no-repeat;<br>\tbackground-position: center;<br>\tbackground-size: cover;<br>}<br>/<style>

效果圖如下：

css背景圖片控制

通過上圖更改background-size，我們可以看到方法一和方法二都能輕鬆實現。而且，最後一種cover效果是最理想的，即居中顯示，佔滿整個容器並且不變形。這種方法如果不考慮seo的話，用起來還是很順手的。但是，如果您是資訊站、圖片展等等，千萬不要用這種方法，否則你的圖片將很難被搜索引擎收錄。

四、如果有什麼方法，即能實現第三種方法的效果，又能兼顧SEO就好了。這裡就要隆重推出：object-fit和object-position。你可以這麼理解，object-position相當於background-position，它的默認值是50% 50%，也就是居中，所以一般不寫，加了object-fit，默認就居中了。而object-fit，相當於background-size，即圖片填充方式（這裡不是圖片大小）。

<style><br>div{<br>\twidth: 200px;<br>\theight: 200px;<br>\tborder: 2px solid red;<br>}<br>img{<br>\twidth: 100%;<br>\theight: 100%;<br>\tobject-fit: cover;<br>}<br>/<style>

\t 

效果圖如下：

object-fit控制圖片顯示

通過上圖，我們幾乎看到了和用背景方法設置效果幾乎一模一樣的結果。可以這麼說，這就是背景方法的翻版，並且還可以避免背景圖不會被搜索引擎不收錄缺點。如果不考慮兼容IE，為什麼不用這種方法呢。媽媽再也不用擔心編輯亂上傳圖片了！

注意：圖片一定要設置寬高，否則設置object-fit無效。將圖片設置為何容器一樣的寬高就可以了。容器也不需要設置溢出隱藏，object-fit會自動隱藏超出圖片的寬高部分。

關注IT學堂，獲取更多前端乾貨~