Einführung in die Steuerung der Bildgröße in CSS

1. Beispiellösung für die Erstellung von Webseiten: Verwenden Sie CSS, um die adaptive Größe von Bildern zu steuern.

Die automatische Anpassung der Größe von Bildern ist eine sehr häufige Funktion Um zu verhindern, dass das Bild den Container öffnet, müssen wir die Größe des Bildes steuern. Können wir das Bild mithilfe von CSS steuern, damit es sich an die Größe anpasst?

Wir haben uns eine relativ einfache Lösung überlegt, die zwar nicht perfekt ist, aber wenn Ihre Anforderungen nicht sehr hoch sind, kann sie Ihren Bedürfnissen bereits gerecht werden. Schauen wir uns den folgenden Code an:

p img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

　◎ max-width: 600px; die maximale Breite beträgt 600px unter IE7, FF und anderen Nicht-IE-Browsern. Aber es funktioniert nicht im IE6.

　◎ width:600px; Die Größe des Bildes beträgt in allen Browsern 600px;

　◎ Wenn die Bildgröße größer als 600px ist, wird sie automatisch auf 600px reduziert. Gültig in IE6.

　◎ overflow:hidden; Verstecken Sie den überschüssigen Teil, um Dehnungen und Verformungen zu vermeiden, die durch mangelnde Kontrolle der Bildgröße verursacht werden.

2. Manchmal ist das Bild zu groß, was das übersichtliche Layout der Webseite zerstört. Zu diesem Zeitpunkt können Sie CSS verwenden, um eine proportionale Komprimierung der Höhe oder Breite des Bildes zu erzwingen.

Der CSS-Code lautet wie folgt:

img,a img{ 
border:0; 
margin:0; 
padding:0; 
max-width:590px; 
width:expression(this.width>590?"590px":this.width); 
max-height:590px; 
height:expression(this.height>590?"590px":this.height); 
}

Auf diese Weise Wenn die Höhe oder Breite des Bildes 590 Pixel überschreitet, wird es proportional auf 590 Pixel komprimiert. Wenn die Größe nicht überschritten wird, wird es in der Originalgröße angezeigt.

Das obige ist der detaillierte Inhalt vonEinführung in die Steuerung der Bildgröße in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!