Web-Frontend
HTML-Tutorial
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)
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>
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
Wie analysiert und verarbeitet man HTML/XML in PHP?
Feb 07, 2025 am 11:57 AM
Dieses Tutorial zeigt, wie XML -Dokumente mit PHP effizient verarbeitet werden. XML (Extensible Markup-Sprache) ist eine vielseitige textbasierte Markup-Sprache, die sowohl für die Lesbarkeit des Menschen als auch für die Analyse von Maschinen entwickelt wurde. Es wird üblicherweise für die Datenspeicherung ein verwendet und wird häufig verwendet
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
