主页 / user-648451

Kira's questions

Martin Hope
Kira
Asked: 2024-11-08 13:03:31 +0800 CST
  • 5

我想制作一张有两列的卡片。第一个包含图像，第二个包含内容。内容高度等于 min-content 并且您希望图像高度始终相同。而且，图像的初始高度比任何内容都大。不用JS可以实现这个功能吗？

代码：

.box {
  display: flex;
  column-gap: 20px;
}

.card__content {
  height: min-content;
}

.card__img {
  overflow: hidden;
}

.card__img img {
  height: 100%;
}

.card__content p {
  margin: 0;
}
<div class="box">
  <div class="card__img">
    <img src="images/products/yummy1.jpeg" alt="">
  </div>
  <div class="card__content">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, asperiores!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, asperiores!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, asperiores!</p>
  </div>
</div>"

html