CSS Cards:如何在不知道图像高度的情况下设置图像的相同高度

Question

我的目标:https://i.stack.imgur.com/HnALf.png图像对齐得很好。尽管图像和文本的高度不同，但正如您在图像中看到的那样，每个部分的开头都与旁边的部分对齐。

如何用CSS实现?

p。S:

• 我可以使用表来实现这一点很容易!但是我需要为响应式版本创建具有相同图像和文本的其他元素，我不想这样做。
• 我可以使用Javascript给图像容器一个最小高度等于三个图像的最高高度，但我觉得它可以使用CSS =>响应式版本要容易得多。此外，这个技巧对"标题"不起作用。部分原因是在较小的屏幕尺寸上，它会破裂(对于两个"px"还有"vw"单位)

/*window.onload = function(){
let imgs = Array.from(document.querySelectorAll('.imgContainer img'));
let oldMinHeight = 0;
imgs.forEach(function(singleImg){
if(singleImg.clientHeight > oldMinHeight){
oldMinHeight = singleImg.clientHeight;
}
});                                                                    
Array.from(document.querySelectorAll('.imgContainer')).forEach(function(singleImgContainer){
singleImgContainer.style.minHeight = (oldMinHeight) + 'px';
});
}*/
//This is the script that gives the minHeight to the image containers.

*{
font-family: sans-serif;
}
section{
display: flex;
justify-content: center;
}
.product{
margin: 0 2vw;
padding-top: 2vw;
background:#ececec;
border-radius: 5px;
}
.product .imgContainer{
display: flex;
width:15vw;
height: auto;
margin:auto;
}
.product img{
margin:auto;
width:100%;
display: block;
}
.product .desc, .product .title{
width:15vw;
margin-left: 2vw;
margin-right: 2vw;
margin-bottom: 2vw;
}

<section>
<div class="product">
<div class="imgContainer"><img src="https://images.pexels.com/photos/12641780/pexels-photo-12641780.jpeg?cs=srgb&dl=pexels-stayhereforu-12641780.jpg&fm=jpg">           </div>
<div class="title">Title Title Title Title Title Title Title Title Title Title Title</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>
<div class="product">
<div class="imgContainer"><img src="https://images.pexels.com/photos/12681236/pexels-photo-12681236.jpeg?cs=srgb&dl=pexels-vildan-hanne-do%C4%9Fan-12681236.jpg&fm=jpg"></div>
<div class="title">Title</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>
<div class="product">
<div class="imgContainer"><img src="https://images.pexels.com/photos/12489081/pexels-photo-12489081.jpeg?cs=srgb&dl=pexels-josh-hild-12489081.jpg&fm=jpg"></div>
<div class="title">Title</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</div>
</section>

Answer 1

您可以为图像使用object-fit属性并为其容器设置一个固定的高度。

* {
font-family: sans-serif;
}
section {
display: flex;
justify-content: center;
}
.product {
margin: 0 2vw;
padding-top: 2vw;
background: #ececec;
border-radius: 5px;
}
.product .imgContainer {
display: flex;
width: 15vw;
height: 150px; /* Changed */
margin: auto;
}
.product img {
margin: auto;
width: 100%;
display: block;
object-fit: contain; /* Added */
}
.product .desc,
.product .title {
width: 15vw;
margin-left: 2vw;
margin-right: 2vw;
margin-bottom: 2vw;
}

<section>
<div class="product">
<div class="imgContainer"><img src="https://images.pexels.com/photos/12641780/pexels-photo-12641780.jpeg?cs=srgb&dl=pexels-stayhereforu-12641780.jpg&fm=jpg"> </div>
<div class="title">Title Title Title Title Title Title Title Title Title Title Title</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>
<div class="product">
<div class="imgContainer"><img src="https://images.pexels.com/photos/12681236/pexels-photo-12681236.jpeg?cs=srgb&dl=pexels-vildan-hanne-do%C4%9Fan-12681236.jpg&fm=jpg"></div>
<div class="title">Title</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>
<div class="product">
<div class="imgContainer"><img src="https://images.pexels.com/photos/12489081/pexels-photo-12489081.jpeg?cs=srgb&dl=pexels-josh-hild-12489081.jpg&fm=jpg"></div>
<div class="title">Title</div>
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
</div>
</section>