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

Question

I\'ve used the CSS flex box layout which appears as shown below:

If t

Answer 1

I came here looking for an answer to my distorted images. Not totally sure about what the op is looking for above, but I found that adding in align-items: center would solve it for me. Reading the docs, it makes sense to override this if you are flexing images directly, since align-items: stretch is the default. Another solution is to wrap your images with a div first.

.myFlexedImage {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}