Question 80273 in Html Question posted in
Some basic documentation can be found here.

Why in flex with column direction, aspect-ratio is not respected? – Html

I have 3 images put into a flexbox with column direction. I want those 3 images each being displayed within their own square containers (1:1 aspect ratio). However, it’s not working because of the height. (So three images, each displayed as a square)

If I change flex direction to row, things are working correctly. If I use grid layout for Images with grid-template-row: repeat(3, 1fr), it’s also working correctly.

Why flex with column direction doesn’t work? Thanks!

.Container {
  width: 258px;
}

.Images {
  display: flex;
  flex: 1 1 25%;
  flex-direction: column;
}

.ImageContainer {
  flex: 1 1 calc(100%/3);
  aspect-ratio: 1/ 1;
}

.Image {
  display: block;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
<div class="Container">
  <div class="Images">
    <div class="ImageContainer">
      <img class="Image" src="https://www.simplilearn.com/ice9/free_resources_article_thumb/css-advance-3.JPG">
    </div>
    
    <div class="ImageContainer">
      <img class="Image" src="https://www.simplilearn.com/ice9/free_resources_article_thumb/css-advance-3.JPG">
    </div>
    
    <div class="ImageContainer">
      <img class="Image" src="https://www.simplilearn.com/ice9/free_resources_article_thumb/css-advance-3.JPG">
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0 
    `<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Test</title>
    <style>
      .Container {
        width: 258px;
      }

      .Images {
        display: flex;
        flex: 1 1 25%;
        flex-direction: column;
      }

      .ImageContainer {
        flex: 1 1 calc(100%/3);
        padding-bottom: calc(100%/3); /* Set height equal to width */
        position: relative; /* Needed for absolute positioning of image */
      }

      .Image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div class="Container">
      <div class="Images">
        <div class="ImageContainer">
          <img class="Image" src="https://www.simplilearn.com/ice9/free_resources_article_thumb/css-advance-3.JPG">
        </div>
        <div class="ImageContainer">
          <img class="Image" src="https://www.simplilearn.com/ice9/free_resources_article_thumb/css-advance-3.JPG">
        </div>
        <div class="ImageContainer">
          <img class="Image" src="https://www.simplilearn.com/ice9/free_resources_article_thumb/css-advance-3.JPG">
        </div>
      </div>
    </div>
  </body>
</html>`

    try this way maybe it could help solve the problem

    Login or Signup to reply.
  2. 0

    move the aspect-ratio to the image instead

    .Container {
  width: 258px;
}

.Images {
  display: flex;
  flex: 1 1 25%;
  flex-direction: column;
}

.ImageContainer {
  flex: 1 1 calc(100%/3);
  border:1px solid;
}

.Image {
  display: block;
  object-fit: contain;
  width: 100%;
  aspect-ratio: 1;
}
    <div class="Container">
  <div class="Images">
    <div class="ImageContainer">
      <img class="Image" src="https://www.simplilearn.com/ice9/free_resources_article_thumb/css-advance-3.JPG">
    </div>
    <div class="ImageContainer">
      <img class="Image" src="https://www.simplilearn.com/ice9/free_resources_article_thumb/css-advance-3.JPG">
    </div>
    <div class="ImageContainer">
      <img class="Image" src="https://www.simplilearn.com/ice9/free_resources_article_thumb/css-advance-3.JPG">
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search