在頭條IT學(xué)堂看到CSS完美解決前端圖片變形問(wèn)題的文章，就記錄分享下：

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

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

效果圖：

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

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

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

效果圖如下：

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

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

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

效果圖如下：

通過(guò)上圖更改background-size，我們可以看到方法一和方法二都能輕松實(shí)現(xiàn)。而且，最后一種cover效果是最理想的，即居中顯示，占滿(mǎn)整個(gè)容器并且不變形。這種方法如果不考慮seo的話(huà)，用起來(lái)還是很順手的。但是，如果您是資訊站、圖片展等等，千萬(wàn)不要用這種方法，否則你的圖片將很難被搜索引擎收錄。

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

效果圖如下：

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論