這篇文章主要為大家展示了“css中img失真的解決方法”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css中img失真的解決方法”這篇文章吧。

創(chuàng)新互聯(lián)-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比青岡網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式青岡網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋青岡地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴(lài)。

css img失真的解決辦法：1、打開(kāi)相應(yīng)的css文件；2、通過(guò)設(shè)置“object-fit:none;”來(lái)保留原有元素內(nèi)容的長(zhǎng)度和寬度即可。

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

css img失真怎么辦？

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

但是要注意，設(shè)置了object-fit:none后，當(dāng)屏幕尺寸小于圖片大小的時(shí)候，圖片會(huì)自動(dòng)裁剪至中間位置

以上是“css中img失真的解決方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！