可能使父母的荣誉宽度的孩子形象？

Question

我想让一个父元素荣誉一个子图像的宽度。

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

如果你用宽度而不是高度来模拟上面的话，那就没有问题了。

这里是行为的视频：http://jmp.sh/8VEOZS8

下面是一个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;只是这样它会显示为一个块元素，并消除周围等怪异空间

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>