一、讓圖片的寬度或者高度等於容器的寬度或高度，多餘的裁掉，然後讓圖片居中：
-
<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>
效果圖如下：
css設置圖片
如果圖片的寬度限制了，高度大於等於容器的高度，就會填滿整個容器，但是如果圖片高度小於容器高度，就會出現空白，固定高度同理。此方法是最簡單也最實用，配合後臺裁切，更加完美。
二、讓圖片始終顯示在容器內，並且居中顯示。這種方法不會裁切圖片，可以說是上面的升級版。
-
<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>
效果圖如下：
max-width控制圖片
可以看到，無論是寬度超過容器，還是高度超過容器，還是寬高都不超過容器，都能全部居中顯示在容器內，不會裁切。
此外，藉助JS也能實現這種效果：即當圖片的寬度大於高度，則設置圖片的寬度爲100%，如果圖片的高度大於寬度，則設置高度爲100%，這裏僅僅進行討論，實戰中，並不使用這種方法（能用css實現的，就不要用js了嘛）。爲了方便，這裏藉助了jQuery，記得引入jQuery哦！
-
<style> div{ width: 200px; height: 200px; border: 2px solid red; position: relative; } img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <div> <img src="1.png"> </div> <br> <div> <img src="1.jpg"> </div> <script type="text/javascript"> //一定要等圖片加載完再進行計算 window.onload = function(){ $('img').each(function(){ var _w = $(this).width(); var _h = $(this).height(); if(_w > _h){ $(this).css('width','100%'); }else{ $(this).css('height','100%'); } }) } </script>
三、將圖片變成背景，通過改變背景尺寸等可以任意改變圖片在容器中顯示的效果，操作是最方便的：
-
<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>
效果圖如下：
css背景圖片控制
通過上圖更改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>
效果圖如下：
object-fit控制圖片顯示
注意：圖片一定要設置寬高，否則設置object-fit無效。將圖片設置爲何容器一樣的寬高就可以了。容器也不需要設置溢出隱藏，object-fit會自動隱藏超出圖片的寬高部分。