响应式图像与响应式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/