CSS如何解決前端圖片變形的問題

這篇文章將為大家詳細(xì)講解有關(guān)CSS如何解決前端圖片變形的問題，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一、讓圖片的寬度或者高度等于容器的寬度或高度，多余的裁掉，然后讓圖片居中：

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

效果圖：

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

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

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

效果圖如下：

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

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

<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，我們可以看到方法一和方法二都能輕松實(shí)現(xiàn)。而且，最后一種cover效果是最理想的，即居中顯示，占滿整個容器并且不變形。這種方法如果不考慮seo的話，用起來還是很順手的。但是，如果您是資訊站、圖片展等等，千萬不要用這種方法，否則你的圖片將很難被搜索引擎收錄。

四、如果有什么方法，即能實(shí)現(xiàn)第三種方法的效果，又能兼顧SEO就好了。這里就要隆重推出：object-fit和object-position。你可以這么理解，object-position相當(dāng)于background-position，它的默認(rèn)值是50% 50%，也就是居中，所以一般不寫，加了object-fit，默認(rèn)就居中了。而object-fit，相當(dāng)于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>

效果圖如下：

通過上圖，我們幾乎看到了和用背景方法設(shè)置效果幾乎一模一樣的結(jié)果?？梢赃@么說，這就是背景方法的翻版，并且還可以避免背景圖不會被搜索引擎不收錄缺點(diǎn)。如果不考慮兼容IE，為什么不用這種方法呢。媽媽再也不用擔(dān)心編輯亂上傳圖片了！

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

關(guān)于“CSS如何解決前端圖片變形的問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。