Question

我试图让父元素尊重子图像的宽度。

它适用于加载，但如果您调整视口的高度以强制更改图像高度，则父元素会“记住”图像的初始大小并保持该宽度。

如果您使用宽度而不是高度模仿上述内容，则没有问题。

这是一个codepen：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）如果有办法解决它

谢谢！

Answer 1

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

＆＃13;

html, body { height: 100%; }

.wrapper {
  display: inline-block;
  border: 1px solid black;
}

img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

＆＃13;

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

＆＃13;

可以制作儿童形象的父荣誉宽度吗？

1 个答案: