用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>      

效果圖如下：

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>