Um die Größe des Bildes automatisch an den Div-Container anzupassen, legen wir das folgende CSS-fproperty- oder img-Tag fest -
max-width: 100%; max-height: 100%;
Zuerst legen wir das Bild mithilfe des img-Tags innerhalb des div mydiv fest -
<div id="myDiv"> <img src="https://www.tutorialspoint.com/behave/images/behave.jpg"> </div>
Wir haben mydiv auf automatische Höhe und Breite eingestellt, um eine automatische Größenänderung des div zu ermöglichen -
#myDiv {
height: auto;
width: auto;
border: 2px solid blue;
}
Für das Bild in mydiv sind jetzt die folgenden CSS-Eigenschaften „max-widd“ und „max-height“ festgelegt, um eine automatische Größenänderung ohne Probleme zu ermöglichen –
#myDiv img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
Sehen wir uns nun ein vollständiges Beispiel für die automatische Größenänderung eines Bilds an, um es mithilfe von CSS an einen Div-Container anzupassen -
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
height: auto;
width: auto;
border: 2px solid blue;
}
#myDiv img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
</style>
</head>
<body>
<div id="myDiv">
<img src="https://www.tutorialspoint.com/behave/images/behave.jpg">
</div>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie kann ich die Größe eines Bildes mithilfe von CSS automatisch an einen Div-Container anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was bedeutet WLAN deaktiviert?
Was soll ich tun, wenn msconfig nicht geöffnet werden kann?
Die Rolle des Formatfactory-Tools
Der Unterschied zwischen while-Schleife und do-while-Schleife
So lösen Sie devc-chinesische verstümmelte Zeichen
So registrieren Sie ein Bitcoin-Wallet
Ripple-Markt heute
Lenovo-Tastaturtreiber
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
