html - Flexbox 中的等高图像

Question

我正在尝试创建一系列带有图像和文本的 flexboxes。我希望所有图像高度对齐，但是，所有源图像的大小都不同。

我搜索了这里和 found this本质上是同一个问题，但解决方案似乎对我不起作用。

这是我所拥有的:

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:

<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 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%;}
}

Answer 1

您想为每张图片设置相同的高度吗？

好吧，你写 height : auto 所以高度是图像的正常高度。例如，您应该定义一个高度:height: 200px。目前您的图像变形是因为您定义了宽度和高度，您应该知道使用 object-fit : contain 或 object-fit : cover 来保持比例