我试图让.video-wrap高度为包装物高度的100%。我需要的只是使所有图像的宽度和高度相同。 问题是在px中未指定高度以创建响应式布局。 如何让所有图像具有相同的高度? 我不需要js解决方案。内容高度父容器的100%
body {
background: #a1a1a1;
}
.video-wrap {} .wrapper {
display: flex;
height: inherit;
}
.video {
width: 29.69%;
margin: 2%;
box-sizing: border-box;
background: gray;
}
.content {
padding: 1.5%;
border: 3px solid rgba(140, 139, 139, 0.6);
background-color: black;
}
.video img {
width: 100%;
height: 100%;
display: block;
}
div.desc {
color: white;
text-align: center;
}
<body>
<div class="wrapper">
<div class="video">
<div class="video-wrap">
<div class="content">
<a target="_blank" href={link}>
<img src="" />
</a>
</div>
<div class="desc">NY 1</div>
</div>
</div>
<div class="video">
<div class="video-wrap">
<div class="content">
<a target="_blank" href={link}>
<img src="https://cache-graphicslib.viator.com/graphicslib/thumbs360x240/8747/SITours/one-world-observatory-admission-in-new-york-city-224249.jpg" />
</a>
</div>
<div class="desc">NY 2</div>
</div>
</div>
<div class="video">
<div class="video-wrap">
<div class="content">
<a target="_blank" href={link}>
<img src="http://cdn.ek.aero/english/images/New-York-1_tcm233-2256848.jpg" />
</a>
</div>
<div class="desc">NY 2</div>
</div>
</div>
</div>
</body>
我不知道如果我这样做是正确的,但你有没有尝试设置'最小高度:100%;'? –
DawidZbiński,是的,这就是我想要实现的。 –