1

I have an <img> inside a <div> with display: flex. The images is resizing without keeping the aspect ratio but when I reload the page it appears resized properly. Why does this happens and how can I resize the image inside a <div> with display: flex properly without refreshing the page?

Here is a .gif of the issue:

gif of the issue

Here is the code:

UPDATE: The default code snippet from stackoverflow seems to resize properly until 220px height but the reported issue happens in codepen (https://codepen.io/guizo/pen/XKPdKK?editors=1100#0) and if I open the html file on Chrome, Firefox and Edge.

* {
  margin: 0 !important;
  padding: 0 !important;
}
html, body, div {
  width: 100%;
  height: 100%;
}
div {
  display: flex;
  justify-content: flex-end;
}
img {
  max-width: 100%;
  max-height: 100%;
}
<div class="content">
  <img src="https://pixabay.com/static/uploads/photo/2016/01/19/18/00/city-1150026_960_720.jpg" alt="" />
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
guizo
  • 2,594
  • 19
  • 26
  • 1
    Your code snippet, in full page view, scales the image down smoothly in Chrome, FF, IE 11 and (having best performance) Edge. – Michael Benjamin Aug 02 '16 at 04:14
  • 2
    For horizontal resizing you'll want to use `align-items`. The default value is `stretch` which will cause your image to squish, so try `align-items: center;` or `flex-end`. – hungerstar Aug 02 '16 at 04:27
  • @Michael_B I didn't realize that the code was working fine on this code snipet (at least until 220px heigh). But this same code does not work on codepen or with the .html file on Chrome or Firefox. Thank you. – guizo Aug 02 '16 at 05:27
  • @hungerstar adding align-items: center or flex-end to the div didn't worked for me. Thank you. – guizo Aug 02 '16 at 05:30
  • @guizo [it does work](https://jsfiddle.net/hungerstar/oeo2ap5k/) sir. Reminder, this is a fix for horizontal squishing. – hungerstar Aug 02 '16 at 13:31
  • @hungerstar sorry I didn`t understood what you mean before. It does work for horizontal resizing. I would expect that justify-content: center or flex-end would have a similar result but unfortunately vertical resizing still stretches. Thank you. – guizo Aug 02 '16 at 17:34

0 Answers0