Heim >Web-Frontend >HTML-Tutorial >So legen Sie die Bildgröße in HTML fest
So legen Sie die Bildgröße in HTML fest
- 青灯夜游Original
- 2021-05-06 14:48:4934497Durchsuche
Methode: 1. Verwenden Sie die Breiten- und Höhenattribute des img-Tags, die Syntax „
"; 2. Verwenden Sie die Breite und Höhenattribute von CSS, die Syntax lautet „img{width: value; height: value}“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Methode 1: Verwenden Sie die Breiten- und Höhenattribute des img-Tags.
Die Höhen- und Breitenattribute des Tags legen die Größe des Bildes fest.
<img src="img/1.jpg" style="max-width:90%" style="max-width:90%"/ alt="So legen Sie die Bildgröße in HTML fest" >
Warum Höhen- und Breitenattribute verwenden?
Haben Sie jemals ein Dokument gesehen, dessen Inhalt beim Laden unregelmäßige Bewegungen aufweist? Dies liegt daran, dass der Browser die Seite ständig neu anordnet, um jedes geladene Bild anzeigen zu können. Der Browser bestimmt die Größe des Bildes, indem er die Breite und Höhe des Bildes herunterlädt und analysiert und dann einen entsprechenden rechteckigen Bereich im Anzeigefenster freilässt. Der Browser passt dann das Anzeigelayout der Seite an, um das Bild in die Anzeige einzufügen. Dies sagt uns auch, dass das Bild eine unabhängige Datei ist und unabhängig von der Quelldatei geladen wird.
Dies ist jedoch nicht die effizienteste Art, Dokumente anzuzeigen, da der Browser jede Bilddatei überprüfen und deren Bildschirmfläche berechnen muss, bevor er angrenzende und nachfolgende Dokumentinhalte anzeigt. Dies kann zu einer sehr großen Verzögerung bei der Anzeige des Dokuments führen und den Benutzer beim Lesen unterbrechen.
Eine effizientere Methode für Ersteller besteht darin, die Größe des Bildes über die Höhen- und Breitenattribute des -Tags anzugeben. In diesem Fall reserviert der Browser vor dem Herunterladen einen Speicherort für das Bild, wodurch die Anzeige des Dokuments beschleunigt und verhindert wird, dass sich der Dokumentinhalt verschiebt. Beide Eigenschaften müssen ganzzahlige Werte sein und die Bildabmessungen in Pixeln darstellen. Die Reihenfolge, in der diese beiden Attribute im
-Tag erscheinen, ist nicht wichtig.
Probleme mit Höhen- und Breitenattributen
Während die Höhen- und Breitenattribute des -Tags die Leistung verbessern und Ihnen die Umsetzung einiger Tricks ermöglichen, gibt es bei ihrer Verwendung einige knifflige Nebenwirkungen. Selbst wenn der Benutzer das automatische Herunterladen von Bildern deaktiviert hat, muss der Browser den für das Bild reservierten Platz weiterhin in der angegebenen Größe anzeigen. Was der Leser dadurch zurücklässt, ist normalerweise ein leerer Rahmen mit einem bedeutungslosen Symbol, das darauf hinweist, dass das Bild hier platziert werden soll. An diesem Punkt sieht die Seite wirklich schlecht aus, als wäre sie noch gar nicht fertig, und der größte Teil des Inhalts wird nutzlos sein. Wenn Sie diese angegebenen Größen nicht verwenden, platziert der Browser einfach ein Bildsymbol im Text, sodass zumindest ein Teil des Textes in der Anzeige noch lesbar ist.
Empfohlenes Tutorial: „HTML-Video-Tutorial“
Methode 2: Verwenden Sie die Breiten- und Höhenattribute von CSS
Das Breitenattribut legt die Breite des Elements fest und das Höhenattribut legt die Höhe des Elements fest.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img{
width:200px ;
height: 200px;
}
</style>
</head>
<body>
<img src="img/1.jpg"/ alt="So legen Sie die Bildgröße in HTML fest" >
</body>
</html>
Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !
Das obige ist der detaillierte Inhalt vonSo legen Sie die Bildgröße in HTML fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!