Адаптивные изображения против Адаптивных Div

Question

У меня есть следующие простые примеры с точным css.

Единственное отличие состоит в том, что первое - это тег img, а второе - просто div.

Я не могу понять, почему при одинаковых css элементы div реагируют, когда свертываются окно и изображения не являются.

img {
  width: 100%;
  height: 200px;
  border: solid blue;
}

https://jsfiddle.net/sjqh6xcy/2/

.block {
  width: 100%;
  height: 200px;
  border: solid blue;
}

https://jsfiddle.net/sjqh6xcy/3/

Answer 1

Свойство width здесь ничего не делает, потому что родительский объект - flexbox. Вместо этого используйте flex-basis.

.wrapper {
  box-sizing: border-box;
  display: flex;
  border: solid red;
}
img {
  flex-basis: 100%;
  height: 200px;
  border: solid blue;
}

<div class="wrapper">
  <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
  <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
</div>

Замечательное руководство по flexbox и свойствам можно найти здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/