html圖片失真的解決方法

這篇文章主要介紹了html圖片失真的解決方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站主要從事做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)巧家,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):13518219792

html圖片失真的解決辦法：首先打開(kāi)相應(yīng)的HTML文件；然后找到HTML img引入的圖片；最后通過(guò)給img圖片添加“object-fit:none;”屬性來(lái)解決圖片失真問(wèn)題即可。

本文操作環(huán)境：windows7系統(tǒng)、HTML5&&CSS3版、Dell G3電腦。

CSS樣式 width:100% 圖片失真

屏幕1920像素，設(shè)置img的width:1920px固定尺寸，圖片不失真，設(shè)置width:100%圖片失真

img{
      display:block;  /*img圖片比父元素高度小幾個(gè)像素，設(shè)置為塊元素，使得父子div高度一致*/
      width:100%;
}

解決為了使圖片自適應(yīng)屏幕大小，設(shè)置width:100%導(dǎo)致圖片失真問(wèn)題

object-fit: none;    /*保留原有元素內(nèi)容的長(zhǎng)度和寬度*/

如果效果不明顯，可以選取一個(gè)帶文字的圖片，可以很好的看出清晰度差別

img{
      width:100%;
      max-width:100%;
      object-fit:none;
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“html圖片失真的解決方法”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

文章名稱(chēng)：html圖片失真的解決方法
網(wǎng)站路徑：http://m.jiaotiyi.com/article/jgpico.html