Flexbox: to maintain aspect ratio of <img> elements do we need to specify a height property for the container or item?

Question

Hi all!

Quick question....

To prevent an <img> element from stretching in Flexbox CSS, is it best to specify it's height/width when using the 'row or 'column' direction? Is there an alternative method?

Any help is greatly appreciated!!!!

Thanks,

Gary!

If you've got time to read on, then below is why I ask.....

I'm currently learning Flexbox. I'm struggling to maintain the aspect ratios of <img> elements in the code below, unless I specify a height rule in the CSS for the <img>. element.

I don't know why, but I've convinced myself I'm going wrong somewhere.

The <img> elements are each roughly 500px wide, inside their container ,pics.

For screen widths over 567px, all <img> elements are given a 'max-width: 50%;', purely to test out the 'row' value change - making at least two <img> elements appear next to each other. However, when I increase the screen width above 567px, the <img> elements lose aspect ratio when I remove the "height: 200px" from the '.pics img' rule inside the media query.

HTML and CSS

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Layout</title>
    <link rel="stylesheet" href="flexbox.css">
</head>
<body class="main-body">
    <header class="main-header">
        <h1 class="name">BestSites</h1>
        <nav>
            <ul class="main-nav">
                <li><a href="">Google</a></li>
                <li><a href="">Twitter</a></li>
                <li><a href="">Amazon</a></li>
                <li><a href="">Bing</a></li>
            </ul>
        </nav>
    </header>
    <div class="pics">
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>
        <img src="mickeymouse1.jpg"/>   
    </div>
<footer class="main-footer">
    <p> The footer goes here.</p>
</footer>

</body>
</html>




*{
  margin: 0;
  padding: 0;
  font-family: Arial;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.main-header,
.name,
nav,
.main-nav,
.main-nav li,
.main-nav li a {
  display: flex;
  flex-flow: row wrap;
  flex: 1 100%;
  justify-content: center;

}

 .pics{
   display: flex;
   flex-flow: column nowrap;
 }

 .pics img{
   max-width: 100%;
}

.name{
  background-color: yellow;
}
.main-nav li {
  background-color: red;
}

li a:hover{
  color: blue;
  background-color: pink;
}

.main-nav a{
  color: white;
}

@media all and (min-width: 567px){
  .pics{
    flex-flow: row wrap;
    justify-content: space-around;
  }

  .pics img {
    height: 200px;
  }

}

Answer 1 · 2016-05-12T19:30:26Z

May 12, 2016 7:30pm

Thanks Pascal, tried 'auto', but it set the images to full size.

I thought CSS was a whizz until I started the Flexbox module. When I read about Flexbox on paper, or watch the videos it looks like it should be very simple to apply. When I go ahead and practice applying these properties I end up getting in a muddle and end up derailing.. Think I'm going to have to drop Flexbox for now and approach it again at a later date.

Welcome to the Treehouse Community

Looking to learn something new?

gary peart

gary peart

Flexbox: to maintain aspect ratio of <img> elements do we need to specify a height property for the container or item?

HTML and CSS

Pascal Pater

Pascal Pater

1 Answer

gary peart

gary peart