Heim > Artikel > Web-Frontend > Wie skaliert man HTML-Bilder proportional? Zusammenfassung der HTML-IMG-Bildskalierungsmethoden (mit Beispielen)
Wie skaliert man HTML-Bilder proportional? Zusammenfassung der HTML-IMG-Bildskalierungsmethoden (mit Beispielen)
- 寻∝梦Original
- 2018-09-01 16:12:5637321Durchsuche
In diesem Artikel werden hauptsächlich die Einführung und Verwendungsbeispiele für die gleiche Skalierung von HTML-IMG-Tag-Bildern vorgestellt. Als nächstes lesen wir diesen Artikel gemeinsam >
Lassen Sie uns zunächst einen Blick darauf werfen, wie man HTML-IMG-Bilder in gleichen Proportionen skaliert:Im DIV-CSS-Layout für Bildliste oder Bildlayout hat das Bild keine feste Breite und Höhe Größe, aber die Bildbelegung ist eine feste Breite und Höhe. Wenn Sie zu diesem Zeitpunkt CSS verwenden, um die Bildgröße (Breite und Höhe) festzulegen, wird die Größe des Bildes nicht proportional zu dieser Position sein verformt werden, was das Bild unangenehm macht. Zu diesem Zeitpunkt möchte ich, dass das Bild proportional skaliert wird, ohne dass es verformt wird. CSS-Bilder können ohne Verformung verkleinert werden, Bilder können automatisch verkleinert werden und Bilder können ohne Verformung proportional verkleinert werden.
Es gibt zwei Lösungen für die Skalierung von HTML-IMG-Tag-Bildern:Stellen Sie zunächst die Breite und Höhe des Bildes und des Layouts proportional ein, sodass CSS die tote Breite festlegt Außerdem wird das Bild verkleinert und nicht verformt.
Zum Beispiel verlangt Taobao, dass die Produkt-Cover-Bilder quadratisch sind. Dies erfordert das Hochladen eines geeigneten quadratischen Baby-Cover-Bildes .
Daher sollte jeder nach Möglichkeit die Layoutbreite und -höhe der Startseite und der Bildlistenseite konsistent halten. Beim Hochladen von Bildern sollten die Bilder zunächst so bearbeitet werden, dass sie proportional zur Layoutbreite und -höhe vergrößert werden.
2. Verwenden Sie CSS max-width und max-height, um das Bild automatisch proportional zu verkleinern
Es ist sehr einfach, max-width und max-height zu verwenden, damit wir es festlegen können die maximale Größe des Objektbildes, sodass das Bild proportional skaliert wird, das Bild jedoch relativ unverzerrt und klar ist.
Das folgende DIVCSS5 verwendet die Beispielvergleichsmethode, damit jeder die Bildreduzierungs- und Nichtverformungstechniken zur CSS-Steuerung beherrschen kann.
Sehen wir uns den Fall der Skalierung von HTML-IMG-Bildern an:Hier gibt es ein DIV-Feld (die DIV-Klasse heißt „tupian“) und die CSS-Breite und Die CSS-Höhe beträgt praktischerweise 300 Pixel und 100 Pixel. Beide setzen 1 Pixel schwarze Ränder und platzieren ein Bild darin (die ursprüngliche Breite des Bildes beträgt 650 Pixel und die Höhe beträgt 406 Pixel). Und korrigieren Sie die Bildbreite und -höhe über CSS.
Alle Codes zum Skalieren des HTML-IMG-Tag-Bildes:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片缩小不变形实例 www.php.cn</title>
<style>
.tupian{ border:1px solid #000; width:300px; height:100px}
.tupian img{width:300px; height:100px}
</style>
</head>
<body>
<div class="tupian">
<img src="img.jpg" />
</div>
</body>
</html>Der Code zeigt den Effekt nicht an, da das Bild nicht platziert ist, sodass Sie es herausfinden können alleine.
Verwenden Sie CSS, um die Höhe und Breite des Bildes innerhalb des Objekts festzulegen, sodass das Bild verformt wird, wenn das Bild nicht proportional verkleinert wird.
Was ich zuvor gesagt habe, ist im Wesentlichen das Gleiche. Beginnen wir jetzt mit der Zusammenfassung:CSS DIV-Bilder werden ohne Verformung reduziert. Zusammenfassung: Die beste Lösung ist, anzufangen vom Design des Bildes selbst und transformieren Sie das Bild so, dass es proportional zur Breite und Höhe im Layout ist. Wenn Sie das Bild beispielsweise gestalten, beträgt die Breite 300 Pixel und die Höhe 200 Pixel Das Bildmaterial, die Breite und Höhe des von Ihnen hinzugefügten Bildes kann 600 Pixel breit, 400 Pixel hoch oder 900 Pixel breit und 600 Pixel hoch sein, sodass Bilder mit gleichen Proportionen sicherstellen können, dass das reale Bild nach der Verkleinerung und Anzeige nicht verformt wird vollständig.
【Empfehlung des Herausgebers】
Wie stelle ich die Schriftgröße des HTML-Schriftart-Tags ein? Einführung in die Verwendung des HTML-Schriftart-Tag-Attributs Was ist der Code zum Hinzufügen von Bildern in HTML? Wie füge ich den Bildpfad korrekt in HTML hinzu?Das obige ist der detaillierte Inhalt vonWie skaliert man HTML-Bilder proportional? Zusammenfassung der HTML-IMG-Bildskalierungsmethoden (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!