Question

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

我在这里搜索并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来保持比例

Flexbox中的相等高度图像

1 个答案: