主页 / 问题 / 1599179
Accepted
Kira
Asked:2024-11-08 13:03:31 +0000 UTC2024-11-08 13:03:31 +0000 UTC

如何使图像高度适应网格或柔性网格？

  • 772

我想制作一张有两列的卡片。第一个包含图像，第二个包含内容。内容高度等于 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

1 个回答

  1. Best Answer

    有必要将图像设置position: absolute为失去相对于整个站点的高度和宽度，并仅服从其父级（我们使用 指定）position: relative。还
    指定图像根据父级的宽度或高度进行最大扩展，并且还指定图像不会由于父级的不成比例而拉伸，父级不断改变其高度和宽度。width:100%height:100%object-fit:cover

    .box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}
.card__img {
    display: block;
    position: relative;
} 
.card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.card__content p {
    margin: 0;
}
    <div class="box">
    <div class="card__img">
        <img src="https://isstatic.askoverflow.dev/Dyz23U4E.jpg" width="500" height="500" 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>

    • 1

相关问题