[英]Equal Height Images in Flexbox
I'm trying to create a series of flexboxes with an image and text beneath. 我正在尝试创建一系列带下面图像和文本的弹性框。 I'd like all the image heights to align, however, all the source images are of different sizes.
我希望所有图像的高度都可以对齐,但是,所有源图像的大小都不同。
I searched around here and found this to be essentially the same issue, but the solution doesn't seem to work for me. 我在这里搜索, 发现这基本上是相同的问题,但是该解决方案似乎对我不起作用。
Here's what I have: 这是我所拥有的:
CSS: CSS:
.roster {
display: flex;
flex-wrap: wrap;
}
.roster-card {
display: flex;
flex-direction: column;
margin: 10px;
border: 1px solid grey;
box-shadow: 1px 1px 3px #888;
width: 100%;
}
.roster-card img {
width: 100%;
height: auto;
}
.roster-card-content {
display: flex;
flex-direction: column;
width: 100%;
padding: 1.4em;
}
HTML: HTML:
<div class="roster">
<div class="roster-card">
<img src="">
<div class="roster-card-content">
<h3>Name</h3>
<p>Title</p>
<p>Location</p>
<p><a href="">Link</a></p>
</div>
</div>
<div class="roster-card">
<img src="">
<div class="roster-card-content">
<h3>Name</h3>
<p>Title</p>
<p>Location</p>
<p><a href="">Link</a></p>
</div>
</div>
<div class="roster-card">
<img src="">
<div class="roster-card-content">
<h3>Name</h3>
<p>Title</p>
<p>Location</p>
<p><a href="">Link</a></p>
</div>
</div>
</div>
Media Queries (if it matters): 媒体查询(如果有问题):
@media all and (min-width: 40em) {
.roster-card {width: calc(30% - 10px);}
.roster-card p, .roster-card p a {font-size: 0.9em; line-height: 120%;}
}
You want to have equals height for each of your images ? 您是否希望每个图像的高度都相等?
Well you write height : auto
so the height is the normal height of the image. 好吧,您可以编写
height : auto
使高度为图像的正常高度。 You should define a height for exemple : height: 200px
. 您应该为示例定义一个高度:
height: 200px
。 At the moment your image is deform cause you define a width AND a height, you should know use object-fit : contain
or object-fit : cover
to keep proportion 当您的图片变形时,您需要定义宽度和高度,您应该知道使用
object-fit : contain
或object-fit : cover
来保持比例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.