html圖片失真怎麼辦

html圖片失真的解決方法：先開啟對應的HTML檔；然後找到HTML img引入的圖片；最後透過為img圖片加上「object-fit:none;」屬性來解決圖片失真問題即可。

本文操作環境：windows7系統、HTML5&&CSS3版、Dell G3電腦。

CSS樣式width:100% 圖片失真

 

螢幕1920像素，設定img的width:1920px固定尺寸，圖片不失真，設定width:100%圖片失真

img{
      display:block;  /*img图片比父元素高度小几个像素，设置为块元素，使得父子div高度一致*/
      width:100%;
}

 解決為了讓圖片自適應螢幕大小，設定width:100%導致圖片失真問題

object-fit: none;    /*保留原有元素内容的长度和宽度*/

 如果效果不明顯，可以選取一個有文字的圖片，可以很好的看出清晰度差異

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

 但要注意，設定了object-fit:none後，當螢幕尺寸小於圖片大小的時候，圖片會自動裁剪至中間位置

【建議學習： HTML影片教學】

以上是html圖片失真怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！