Heim >Web-Frontend >CSS-Tutorial >So verhindern Sie, dass sich Bilder mit CSS verformen
So verhindern Sie, dass sich Bilder mit CSS verformen
- 藏色散人Original
- 2021-04-08 09:36:226144Durchsuche
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!