Почему изображение не 300 пикселей?

Question

Полностью сломал голову. Когда задаёшь контейнеру display: flex; изображение становится любой ширины. Нужно, чтобы картинка была минимум 400px, ширина контейнера стремилась к 600px, а картинка если не достигала всей ширины центрировалась по центру

https://jsfiddle.net/pxu8og5L/22/

.wrapper1 {
  max-width: 550px;
  border: 2px solid red;
  padding: 5px;
  display: flex;
  align-items: center;
}

.wrapper2 {
  text-align: center;
  height: 200px;
  width: 300px;
  max-width: 65%;
  border: 2px solid red;
}

.img {
  height: 100%;
}

<div class="wrapper1">
  <div class="wrapper2">
    <img class="img" src="https://placeimg.com/600/600/any" alt="">
  </div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolorum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolorum?
</div>

Попробуйте убрать display: flex; и контейнер изображения станет 300x200, а изображение будет внутри

БЛОГ НА HUSL

Почему изображение не 300 пикселей?

Ответы (0 шт):