這篇文章將為大家詳細(xì)講解有關(guān)CSS如何解決前端圖片變形的問題,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
一、讓圖片的寬度或者高度等于容器的寬度或高度,多余的裁掉,然后讓圖片居中:
<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://www.rwnh.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)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容