0

Let's consider some container with display: flex. There are some elements in it.

All elements have the same height because default value of align-items is stretch.

One of these elements is an image.

Is it possible to preserve aspect ratio of this image?

So I have this:

.container {
  display: flex;
}

.description {
  height: 200px;
  background: yellow;
}
<div class="container">
  <img class="image" src="http://placehold.it/200x100" />
  <div class="description">
    Some text of 200px height
  </div>
</div>

And I want to achieve the following result without specifying the height of the container

.container {
  display: flex;
  
  height: 200px;
}

.image {
  height: 100%;
}

.description {
  height: 200px;
  background: yellow;
}
<div class="container">
  <img class="image" src="http://placehold.it/200x100"/>
  <div class="description">
    Some text of 200px height
  </div>
</div>
Aliaksei Tuzik
  • 99
  • 1
  • 2
  • 5
  • possible duplicates: http://stackoverflow.com/q/30788131/3597276 & http://stackoverflow.com/q/14142378/3597276 – Michael Benjamin Mar 27 '16 at 02:00
  • @Michael_B, they aren't duplicates. The first issue is about maintaining _height_ while I want to maintain _width_. Solution of the second issue uses specified height and width which I want to avoid. – Aliaksei Tuzik Mar 27 '16 at 15:15
  • Ok. I wasn't sure. That's why I wrote "possible", and didn't close the question as a dupe. – Michael Benjamin Mar 27 '16 at 15:17

0 Answers0