Maintain aspect ratio in horizontal flex card

Question

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 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>

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 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>

You can remove the position ``` absolute ``` on the image and use this https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio — Amir Naeem, Jan 10 '22 at 11:29
But what about the older browsers which don't have the support. — BLIND, Jan 10 '22 at 12:00
As per the mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio#browser_compatibility IE doesn't support other than that it has pretty good support — Amir Naeem, Jan 10 '22 at 12:05
I think you miss hearing me. I am actually trying to say, it obviously supports modern browsers but what about old gen browsers? — BLIND, Jan 10 '22 at 12:08
It's a good article : https://css-tricks.com/almanac/properties/a/aspect-ratio/#aa-dealing-with-legacy-browser-support Old browser support: https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css — Amir Naeem, Jan 10 '22 at 12:10
Yeah, and I am trying to achieve this for old gen browsers, and that's what the question (padded box technique) is all about. I don't know how to do it. — BLIND, Jan 10 '22 at 12:19
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/240923/discussion-between-blind-and-amir-naeem). — BLIND, Jan 10 '22 at 12:23

score 0 · Accepted Answer · answered Jan 10 '22 at 12:33

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 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>

Maintain aspect ratio in horizontal flex card

1 Answers1