能否使父元素宽度与子元素图像相同？

Question

我想让父元素宽度跟随子图片宽度变化，当页面载入时可以正常工作，但是如果你改变视口高度来强制改变图像高度，则父元素“记住”了初始的图像大小并保持宽度不变。如果你使用宽度模仿上述情况，则不会出现问题。这里有一个行为视频：http://jmp.sh/8VEOZS8 这里有一个代码笔：http://codepen.io/iamkeir/pen/YWgvdw

html, body { height: 100%; }

.wrapper {
  display: inline-block;
  height: 100%;
  border: 1px solid black;
}

img {
  height: 100%;
}

<div class="wrapper">
  <img src="http://placehold.it/1280x960" />
</div>

我想知道：

1）为什么会出现这种情况

2）是否有解决方法

谢谢！

- iamkeir

Answer 1

您可以通过设置max-width和max-height属性来修复它，以便图像不会溢出包装器或窗口。然后，您可以将display: inline-block;设置为包装器，这是现在用于替代浮动元素的方法。我将图像设置为display: block;，只是为了将其显示为块元素，并消除其周围的奇怪空间等。

html, body { height: 100%; }

.wrapper {
  display: inline-block;
  border: 1px solid black;
}

img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

<div class="wrapper">
  <img src="http://placehold.it/1280x960" />
</div>

- thepio

---

很遗憾 - 不幸的是，这没有产生预期的效果，发现它不支持视口高度：http://codepen.io/iamkeir/pen/NAJLrP - iamkeir

你确切想要实现什么？ - thepio

这是一个更大接口的一部分，但我已经试图将其提炼到这个特定问题的本质。基本上，还有另一个包装元素在决定包装器和图像的高度。我想要的行为是在加载时发生的，但也要随着调整大小而流畅 - 我已经更新了笔：http://codepen.io/iamkeir/pen/YWgvdw - iamkeir

我感觉用JS可能更容易修复，也许可以与resize事件对齐。但是，我仍然很好奇它为什么会以这种方式表现——看起来像是CSS的怪异之处。 - iamkeir