html - 溢出 : hidden doesn't work for image

Question

我在 html 中使用以下代码来显示和图像。我希望它“缩放以填充”，其中高度是浏览器高度，宽度根据高度缩放。我想隐藏所有溢出以防止后面的 div 丢失其内容。这是我尝试使用的代码:

<div id="image1">
<img src="http://googledrive.com/host/0By-qb7dZ_m5feE94MkcwSWxLckU"/>
<style>
#image1{
overflow: hidden;
width: auto
height: 100vh;
}
</style>
</div>

如果有人有任何想法那就太好了。

谢谢

Answer 1

将宽度更改为 100%，将高度更改为自动。然后重新定义img样式，将两个属性移到那里。

#image1 {
     overflow: hidden;
}
img {
     width: 100%;
     height: auto;
}