I am able to make a vertical flex card with an image on top and it will maintain 16:9 aspect ratio always. My vertical flex card code

.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 >
                            <div >
                                <img
                                    src="https://via.placeholder.com/150"
                                    alt="img"
                                />
                            </div>
                            <div >
                                <h2 >
                                    Lorem ipsum dolor sit, amet consectetur
                                    adipisicing elit. Ratione, cumque?
                                </h2>
                            </div>
                        </div>

But I want to make it horizontal and I am stuck. Whenever I change the flex-direction to row flex-direction: row; it does not work. I always want the image to be in a 16:9 aspect ratio. My progress

.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 >
                            <div >
                                <img
                                    src="https://via.placeholder.com/150"
                                    alt="img"
                                />
                            </div>
                            <div >
                                <h2 >
                                    Lorem ipsum dolor sit, amet consectetur
                                    adipisicing elit. Ratione, cumque?
                                </h2>
                            </div>
                        </div>

CodePudding user response：

Here is the aspect-ratio example with old browser support. I copied the card layout from bootstrap.

Please view in "Full Page"

.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  style="max-width: 540px;">
  <div >
    <div >
      <div >
        <img src="https://via.placeholder.com/150"  alt="">
      </div>
    </div>
    <div >
      <div >
        <p >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 ><small >Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>