Was tun, wenn HTML-Bilder verzerrt sind?

Lösung für die HTML-Bildverzerrung: Öffnen Sie zuerst die entsprechende HTML-Datei. Suchen Sie dann das von HTML img eingeführte Bild. Fügen Sie schließlich das Attribut „object-fit:none;“ zum Bildverzerrung hinzu.

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Breite im CSS-Stil: 100 % Bildverzerrung

Der Bildschirm ist 1920 Pixel groß, stellen Sie die Breite des Bildes ein: 1920 Pixel, feste Größe, das Bild ist nicht verzerrt, stellen Sie die Breite ein: 100 % Bildverzerrung

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

Lösung Um Passen Sie das Bild an die Bildschirmgröße an. Die Einstellung Breite: 100 % führt zu Bildverzerrungsproblemen

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

Wenn der Effekt nicht offensichtlich ist, können Sie ein Bild mit Text auswählen und Sie können den Unterschied in der Schärfe sehr gut erkennen

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

Bitte beachten Sie jedoch, dass nach dem Festlegen von object-fit:none das Bild automatisch auf die mittlere Position zugeschnitten wird, wenn die Bildschirmgröße kleiner als die Bildgröße ist. [Empfohlenes Lernen:

HTML-Video-Tutorial

]

Das obige ist der detaillierte Inhalt vonWas tun, wenn HTML-Bilder verzerrt sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!