Heim > Artikel > Web-Frontend > So verhindern Sie, dass sich Bilder mit CSS verformen
So erreichen Sie, dass Bilder in CSS nicht verformt werden: Erstellen Sie zunächst eine HTML-Beispieldatei. Fügen Sie dann das IMG-Tag in den Textkörper ein und stellen Sie schließlich das Attribut „max-height“ oder „max-width“ ein Stellen Sie sicher, dass sich das Bild nicht verformt.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Wenn Sie möchten, dass das Bild nicht verformt wird, stellen Sie eine maximale Höhe oder maximale Breite ein oder legen Sie eine Breite oder Höhe fest.
Die Attribute „max-height“ und „max-width“ legen die maximale Höhe und Breite des Elements fest.
Attributwert:
kein Standard. Die Definition legt keine Begrenzung für die maximal zulässige Höhe eines Elements fest.
length definiert den maximalen Höhenwert des Elements.
% definiert die maximale Höhe als Prozentsatz des Objekts auf Blockebene, das sie enthält.
inherit gibt an, dass der Wert des max-height-Attributs vom übergeordneten Element geerbt werden soll.
Die Attribute height und width legen die Höhe und Breite des Elements fest.
Attributwert:
automatische Standardeinstellung. Der Browser berechnet die tatsächliche Höhe.
length definiert die Höhe in Einheiten wie px, cm usw.
% Basierend auf der prozentualen Höhe des Objekts auf Blockebene, das es enthält.
inherit gibt an, dass der Wert des Höhenattributs vom übergeordneten Element geerbt werden soll.
Beispiel:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { float: left; } .test1 img { width: 187.5px; height: 156.5px; } .test2 img { width: 300px; height: 100px; } .test3 img { max-width: 300px; max-height: 100px; } .test4 img { max-width: 100%; height: 200px; } .test5 { width: 300px; height: 200px; } .test5 img { max-width: 100%; max-height: 100%; } .test6 { width: 300px; height: 100px; /*overflow: hidden;*/ } .test6 img { max-width: 300px; max-height: 100px; } .test7 { width: 300px; height: 100px; /*overflow: hidden;*/ } .test7 img { max-width: 300px; } </style> </head> <body> <div class="test1"> <img src="1.jpg" / alt="So verhindern Sie, dass sich Bilder mit CSS verformen" > </div> <div class="test2"> <img src="1.jpg" / alt="So verhindern Sie, dass sich Bilder mit CSS verformen" > </div> <div class="test3"> <img src="1.jpg" / alt="So verhindern Sie, dass sich Bilder mit CSS verformen" > </div> <div class="test4"> <img src="1.jpg" / alt="So verhindern Sie, dass sich Bilder mit CSS verformen" > </div> <div class="test5"> <img src="1.jpg" / alt="So verhindern Sie, dass sich Bilder mit CSS verformen" > </div> <div class="test6"> <img src="1.jpg" / alt="So verhindern Sie, dass sich Bilder mit CSS verformen" > </div> <div class="test7"> <img src="1.jpg" / alt="So verhindern Sie, dass sich Bilder mit CSS verformen" > </body> </html>
Der Effekt ist wie im Bild gezeigt:
[Empfohlenes Lernen: CSS-Video-Tutorial]
Das obige ist der detaillierte Inhalt vonSo verhindern Sie, dass sich Bilder mit CSS verformen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!