Why Does Flexbox Stretch My Image Rather Than Retaining Aspect Ratio

Why does flexbox stretch my image rather than retaining aspect ratio?

It is stretching because align-self default value is stretch.
Set align-self to center.

align-self: center;

See documentation here:
align-self

Why does wrapping an image with a div in a flexbox scale it correctly but img item doesn't scale?

Does this do what you need?

Markup:

<body>
  <div class="stack">
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
    </div>
</body>

CSS:

.stack {
  display:flex;
}
.stack img {
   align-self:center;
   width: 100px;
}

https://jsfiddle.net/zbac1dxe/6/

How to prevent flexbox stretching my image horizontally?

Update css part

.row img{
  max-height: 100%;
  object-fit:contain; /* Add this You can change it as your need */
}
.inner{
  display: flex;
  flex-flow:column nowrap;
  justify-content:flex-start;
}
.wrapper{
  width: 100%; /*Add this*/
  height: 900px;
  background: white;
}

update fiddle

Update fiddle

.wrapper{  width: 100%;  height: 900px;  background: white;}.inner{  display: flex;  flex-flow:column nowrap;  justify-content:flex-start;}.row{  max-height: 100px;  margin: 20px;  display: flex;  flex-direction: row;  background: red;}.row img{  max-height: 100%;  object-fit:contain;}

<div class="wrapper">  <div class="inner">    <div class="row">      <img src="https://www.wired.com/wp-content/uploads/2015/11/google-tensor-flow-logo-F.jpg">    </div>    <div class="row">      <img src="https://www.wired.com/wp-content/uploads/2015/11/google-tensor-flow-logo-F.jpg">    </div>  </div></div>

Flexbox maintain aspect ratio for different sized images

I ended up combing @Temani Afif's and @G-Cyrillus' approaches to get:

let smoothImg = function () {
    const images = document.querySelectorAll("ul li img");
    for (image of images) {
        image.parentElement.style.flexGrow = image.offsetWidth/image.offsetHeight;
    }
};

window.onload = smoothImg;
window.onresize = smoothImg;

ul {
  list-style-type: none;
  padding: 0;
  display: flex;
}

li {
  flex-grow: 1;
  flex-basis: 0;
}

img {
  max-width: 100%;
}

<ul>
    <li>
        <img src="https://dummyimage.com/1920x1080" />
    </li>
    <li>
        <img src="https://dummyimage.com/1400x1000" />
    </li>
    <li>
        <img src="https://dummyimage.com/200x150" />
    </li>
    <li>
        <img src="https://dummyimage.com/300" />
    </li>
</ul>

Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?

img {max-width:100%;} is one way of doing this. Just add it to your CSS code.

http://jsfiddle.net/89dtxt6s/

Use flexbox and maintain an aspect ratio even though content is sized differently

To maintain the aspect ratio of responsive elements, you can use the padding technique.

Note that you shouldn't use percentages on padding bottom/top for flex children, see here for more info.

You can make a grid of responsive squares and add border-radius to make them circles.

For the images, the object-fit: cover; property does exactly what you need : keep the image original aspect ratio and covering the element completely.

I changed the first image to a landscape image to show this technique works also with those.

Here is an example of how you can achieve your aim (I stripped some of your CSS out to keep the demo simple) :

*,*::before,*::after {  box-sizing: border-box;  margin: 0;  padding: 0;}
.img-gallery {  background: #fafafa;  padding: 24px;  min-width: 320px;  width: 90%;  margin: 0 auto;}
.img-gallery .row {  display: flex;  flex-wrap: nowrap;  justify-content: space-around;  align-items: center;}
.img-gallery a {  display: block;  position:relative;  text-decoration: none;  background-image: linear-gradient(60deg, #004494 0%, #7db9e8 78%, #c2dfed 100%);  overflow: hidden;  border-radius: 50%;  flex: 1;  margin: 24px;}.img-gallery a::before{  content:'';  display:block;  padding-bottom:100%;}

.img-gallery .row:first-of-type a:not(:nth-child(2)) {  width: 30%;  width: calc((60% - 96px) / 2);}
.img-gallery .row:first-of-type a:nth-child(2) {  flex: 2;}
.img-gallery span {  position:absolute;  top:3px;left:3px;right:3px;bottom:3px;  border-radius: 50%;  overflow: hidden;  transition: transform 250ms;}
.img-gallery img {  width: 100%;  height: 100%;  object-fit: cover;  transition:transform 0.5s;}.img-gallery a:hover img{  transform:scale(1.25);}

<div class="img-gallery">  <div class="row">    <a href="#" title="Show large image"><span><img itemprop="image" src="https://farm7.staticflickr.com/6217/6216951796_e50778255c.jpg" id="img-1-3"></span></a>    <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/d6/df/51/d6df512a2f15f517767b4d82d2d97a4c.jpg" id="img-1-4"></span></a>    <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/ec/a9/dd/eca9dd106a04cdbee399870252ef711f.jpg" id="img-1-5"></span></a>  </div>  <div class="row">    <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/7d/01/19/7d0119a2fec989e208f288326c7cad0f.jpg" id="img-1-6"></span></a>    <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/d8/c3/32/d8c332d09b03673845b2e92a48816233.jpg" id="img-1-7"></span></a>    <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/88/3b/dd/883bddab14168f5f0807fec021002d8d.jpg" id="img-1-8"></span></a>  </div>  <div class="row">    <a href="#" title="Show large image"><span><img itemprop="image" src="https://s-media-cache-ak0.pinimg.com/originals/8e/4f/bb/8e4fbb89b155d15521b80d1baf9290d1.jpg" id="img-1-9"></span></a>  </div></div>

CSS Flexbox images not preserving aspect ratio

I'm currently working on a similar problem and it seems to be a bit tricky. I found a solution which works in safari, but won't work in chrome and firefox. They ignore the

max-height: 100%;

property. Check this out and resize browser.

Although i'm not 100% sure what you are trying to achieve (your codepen doesn't change anyhow when resizing the browser window), i've build this one.

Let me know if it's the right direction

Maintain image aspect ratio when changing height

For img tags if you define one side then other side is resized to keep aspect ratio and by default images expand to their original size.

Using this fact if you wrap each img tag into div tag and set its width to 100% of parent div then height will be according to aspect ratio as you wanted.

http://jsfiddle.net/0o5tpbxg/

* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}

Why Does Flexbox Stretch My Image Rather Than Retaining Aspect Ratio