Heim > Artikel > Web-Frontend > So legen Sie fest, dass das Bild so breit ist wie der Container in CSS
So legen Sie fest, dass das Bild so breit ist wie der Container in CSS
- WBOYOriginal
- 2021-12-03 10:20:163487Durchsuche
In CSS können Sie das Attribut „width“ verwenden, um die Breite des Elements auf die gleiche Breite wie den Container festzulegen. Wenn der Attributwert „100 %“ beträgt, wird die Breite des Elements festgelegt element ist die Breite des übergeordneten Elements, also die Breite des Containers. Die Syntax lautet „Bildelement {Breite: 100 %;}“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
So stellen Sie das Bild auf die Breite des Containers in CSS ein.
In CSS müssen wir nur das Breitenattribut des Bildes verwenden, um das Bild auf die Breite des Containers einzustellen Sie müssen den Breitenattributwert des Bildes ändern. Setzen Sie ihn einfach auf 100 %. Das Attribut „width“ legt die Breite des Elements fest. Definiert die prozentuale Breite basierend auf der Breite des enthaltenden Blocks (übergeordnetes Element), wenn die Attributwerteinheit % ist. , das ist die prozentuale Breite des Containers.
Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style>
div{
width: 200px;
height: 200px;
border:1px solid #000000;
}
div img{
width: 100%;
}
</style>
<div>
<img src="1118.02.png" / alt="So legen Sie fest, dass das Bild so breit ist wie der Container in CSS" >
</div>
</body>
</html>Ausgabeergebnis:
Wenn Sie möchten, dass die Höhe genauso hoch ist wie der Container, müssen Sie nur das Höhenattribut hinzufügen und den Attributwert auf 100 % setzen .
(Teilen von Lernvideos:
CSS-Video-TutorialDas obige ist der detaillierte Inhalt vonSo legen Sie fest, dass das Bild so breit ist wie der Container in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!