我有一个问题。我希望图像的div
具有相同的高度(调整窗口大小时缩放)。有人可以帮我吗?我不明白为什么height: 100%;
的大小不能与父div
一样大。
body {
background-color: darkred;
color: #bfbfbf;
font-family: Roboto, serif;
}
.image {
float: left;
width: 30%;
margin: 0 .5% .5% 0;
border: 1px solid white;
box-sizing: border-box;
}
div.head:after {
content: "";
display: table;
clear: both;
}
header {
float: right;
width: 69%;
height: 100%;
background-color: black;
border: 1px solid white;
box-sizing: border-box;
}
.image img {
width: 100%;
}
<div class="head">
<div class="image">
<img src="../assets/Triumph_Spitfire.jpg" alt="">
</div>
<header>
<h1>Triump Spitfire</h1>
<hr>
<p>“poor man’s Jaguar E-type”</p>
</header>
</div>
答案 0 :(得分:0)
您可以使用“ head”类在您的div中添加“ display:flex,align-items:Stretch”。在这里查看小提琴:https://jsfiddle.net/kqwe4jma/1/
.head {
display: flex;
align-items: stretch;
}
答案 1 :(得分:0)
flexbox
在这里可能是一个非常好的解决方案。我删除了您的花车并设置了标头大小。在父母上设置身高是让孩子服从该限制的最简单方法。
body {
background-color: darkred;
color: #bfbfbf;
font-family: Roboto, serif;
}
.image {
height: 100%;
width: auto;
margin: 0 .5% .5% 0;
border: 1px solid white;
box-sizing: border-box;
}
.head {
display: flex;
height: 135px;
}
div.head:after {
content: "";
display: table;
clear: both;
}
header {
flex: 1;
height: 135px;
background-color: black;
border: 1px solid white;
box-sizing: border-box;
}
.image img {
width: auto;
display: block;
height: 100%;
}
<div class="head">
<div class="image">
<img src="https://via.placeholder.com/350x250" alt="">
</div>
<header>
<h1>Triump Spitfire</h1>
<hr>
<p>“poor man’s Jaguar E-type”</p>
</header>
</div>