cssflexboxresponsive-designresponsive-images

How to make responsive images that keep the same aspect ratio across multiple items

I am a bit confused when trying to keep a consistent size with my images when the screen while keeping a stable aspect ratio in my containers.

I try to make a little card that holds a picture and a paragraph. I thought that adjusting the width of a picture would also have an effect on height, making pictures evenly sized and the same across multiple elements, the same with elements like divs. If I don't specify a height, my divs take random heights which seems to be based on amount of content inside. But also, I understand that giving a height would affect the responsiveness of the page. I am very confused.

Things I have tried:

I hope I make sense. If I have phrased it a bit confusing, please let me know.

.flex {
  display: flex;
}

.container-specs {
  width: 80%;
  height: 100vh;

  border: solid 2px burlywood;
  gap: 1rem;

  align-items: center;
  justify-content: center;
}

.container-specs > div {
  width: 100%;
  border: solid 2px brown;
  flex-direction: column;
  flex-basis: 1;
}

.container {
  justify-content: center;
}

img {
  width: 100%;
}
<div class="flex container">
        <div class="container-specs flex">
          <div class="flex">
            <img src="https://images.wallpaperscraft.com/image/single/sea_coast_stones_940685_1280x720.jpg" alt=""/>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui et
              magnam quae ipsa corrupti facilis quasi assumenda alias numquam
              magni. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Modi repellendus iusto laboriosam doloribus corrupti at.
              Recusandae sint quisquam ducimus soluta minima, ratione voluptatum
              omnis repellat iusto, accusamus amet! Enim ratione consequatur
              unde sit dolore tenetur!
            </p>
          </div>
          <div class="flex">
            <img src="https://images.wallpaperscraft.com/image/single/road_fog_valley_938056_1280x720.jpg" alt=""/>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
              Doloribus vero deserunt quos, expedita est fugiat minima maxime
              debitis aliquam ea? Velit nisi sapiente soluta sit aut corporis
              eaque omnis, odit mollitia cumque hic! Iusto, autem.
            </p>
          </div>
          <div class="flex">
            <img src="https://images.wallpaperscraft.com/image/single/stream_meadow_flowers_933530_1280x720.jpg" alt=""/>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Molestiae accusantium asperiores quibusdam quam iusto. Incidunt
              consequatur temporibus magni debitis culpa soluta laudantium,
              voluptatem maxime minus reprehenderit? Perferendis, ipsam. Enim
              facilis iste, provident deleniti ab omnis.
            </p>
          </div>
        </div>
</div>

Solution

  • Do you mean like this?

    .flex {
  display: flex;
}

.container-specs {
  width: 100%;
  min-height: 100vh;
  padding: 1rem 1rem;
  border: solid 2px green;
  gap: 1rem;
  justify-content: center;
}

.container-specs > div {
  width: 100%;
  border: solid 2px red;
  flex-direction: column;
  flex-basis: 1;
  display: flex;
}

.container {
  justify-content: center;
}

img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  max-height: 500px;
}
    <div class="flex container">
        <div class="container-specs flex">
          <div class="flex">
            <img src="https://images.wallpaperscraft.com/image/single/sea_coast_stones_940685_1280x720.jpg" alt=""/>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui et
              magnam quae ipsa corrupti facilis quasi assumenda alias numquam
              magni. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Modi repellendus iusto laboriosam doloribus corrupti at.
              Recusandae sint quisquam ducimus soluta minima, ratione voluptatum
              omnis repellat iusto, accusamus amet! Enim ratione consequatur
              unde sit dolore tenetur!
            </p>
          </div>
          <div class="flex">
            <img src="https://images.wallpaperscraft.com/image/single/road_fog_valley_938056_1280x720.jpg" alt=""/>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
              Doloribus vero deserunt quos, expedita est fugiat minima maxime
              debitis aliquam ea? Velit nisi sapiente soluta sit aut corporis
              eaque omnis, odit mollitia cumque hic! Iusto, autem.
            </p>
          </div>
          <div class="flex">
            <img src="https://images.wallpaperscraft.com/image/single/stream_meadow_flowers_933530_1280x720.jpg" alt=""/>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit.
              Molestiae accusantium asperiores quibusdam quam iusto. Incidunt
              consequatur temporibus magni debitis culpa soluta laudantium,
              voluptatem maxime minus reprehenderit? Perferendis, ipsam. Enim
              facilis iste, provident deleniti ab omnis.
            </p>
          </div>
        </div>
</div>