Question

我有以下带有精确CSS的简单示例。

唯一的区别是第一个是img标签，第二个只是div。

我无法理解为什么使用相同的CSS时，如果将窗口最小化而图像却没有，divs会做出响应。

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/

响应式图片与响应式div

1 个答案: