Flexbox中的等高圖像

Question

我正在嘗試創建一系列帶下面圖像和文本的彈性框。 我希望所有圖像的高度都可以對齊，但是，所有源圖像的大小都不同。

我在這里搜索， 發現這基本上是相同的問題，但是該解決方案似乎對我不起作用。

這是我所擁有的：

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來保持比例