保持水平弹性卡的纵横比

Question

我可以制作一张顶部有图像的垂直弹性卡片，它会始终保持 16:9 的纵横比。我的垂直弹性卡代码

.card {
    display: flex;
    flex-direction: column;
    margin: 0.75rem;
}

.card .card-img {
    position: relative;
    padding-bottom: 56.25%;
}

.card .card-img img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.card .card-body {
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
}

.card .card-body a {
    text-decoration: none;
    font-size: clamp(1rem, 0.6505rem + 0.9709vw, 1.5rem);
    color: #3e3700;
    font-weight: 500;
}

.card .card-body .card-title {
    font-size: clamp(1.125rem, 0.5133rem + 1.699vw, 2rem);
    font-weight: 500;
    line-height: 1;
}

.card .card-body .card-description {
    font-size: clamp(1rem, 0.6505rem + 0.9709vw, 1.5rem);
    font-weight: 300;
    margin-bottom: 0.75rem;
}

<div class="card">
                            <div class="card-img">
                                <img
                                    src="https://via.placeholder.com/150"
                                    alt="img"
                                />
                            </div>
                            <div class="card-body">
                                <h2 class="card-title">
                                    Lorem ipsum dolor sit, amet consectetur
                                    adipisicing elit. Ratione, cumque?
                                </h2>
                            </div>
                        </div>

但我想让它水平，我被卡住了。每当我将 flex-direction 更改为 row flex-direction: row; 时，它都不起作用。我总是希望图像的纵横比为 16:9。我的进步

.card {
    display: flex;
    flex-direction: row;
    margin: 0.75rem;
}

.card.card-h .card-img {
    width: 40%;
}

.card.card-h .card-body {
    width: 60%;
}
.card .card-img {
    position: relative;
    padding-bottom: 56.25%;
}

.card .card-img img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.card .card-body {
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
}

.card .card-body a {
    text-decoration: none;
    font-size: clamp(1rem, 0.6505rem + 0.9709vw, 1.5rem);
    color: #3e3700;
    font-weight: 500;
}

.card .card-body .card-title {
    font-size: clamp(1.125rem, 0.5133rem + 1.699vw, 2rem);
    font-weight: 500;
    line-height: 1;
}

.card .card-body .card-description {
    font-size: clamp(1rem, 0.6505rem + 0.9709vw, 1.5rem);
    font-weight: 300;
    margin-bottom: 0.75rem;
}

<div class="card card-h">
                            <div class="card-img">
                                <img
                                    src="https://via.placeholder.com/150"
                                    alt="img"
                                />
                            </div>
                            <div class="card-body">
                                <h2 class="card-title">
                                    Lorem ipsum dolor sit, amet consectetur
                                    adipisicing elit. Ratione, cumque?
                                </h2>
                            </div>
                        </div>

Answer 1

这里是带有旧浏览器支持的aspect-ratio 示例。我从引导程序中复制了卡片布局。

请在“整页”中查看

.mycard .card-img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}


/*Old Browser Support*/

@supports not (aspect-ratio: 16 / 9) {
  .mycard {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
  }
  .mycard .card-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    background: red;
    /* just for illustration */
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <div class="mycard">
        <img src="https://via.placeholder.com/150" class="card-img" alt="">
      </div>
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>