CSS如何解決前端圖片變形的問題-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)卓資,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

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

<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ì)填滿整個(gè)容器，但是如果圖片高度小于容器高度，就會(huì)出現(xiàn)空白，固定高度同理。此方法是最簡單也最實(shí)用，配合后臺(tái)裁切，更加完美。

二、讓圖片始終顯示在容器內(nèi)，并且居中顯示。這種方法不會(huì)裁切圖片，可以說是上面的升級(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>

效果圖如下：

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

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

<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效果是最理想的，即居中顯示，占滿整個(gè)容器并且不變形。這種方法如果不考慮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é)果?？梢赃@么說，這就是背景方法的翻版，并且還可以避免背景圖不會(huì)被搜索引擎不收錄缺點(diǎn)。如果不考慮兼容IE，為什么不用這種方法呢。媽媽再也不用擔(dān)心編輯亂上傳圖片了！

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

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

新聞標(biāo)題：CSS如何解決前端圖片變形的問題-創(chuàng)新互聯(lián)
標(biāo)題網(wǎng)址：http://muchs.cn/article20/pdejo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、面包屑導(dǎo)航、外貿(mào)建站、做網(wǎng)站、建站公司、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)