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中文網其他相關文章！
