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;
}

Answer 2

我不知道我是否完全知道你的意思，但是尝试将你的宽度设置为100％，这应该涵盖div。

Answer 3

将overflow: hidden;移至重新定义的body样式，删除溢出。

对于问题的“缩放”部分，请将img添加到#image1样式中，以使图像受样式影响，而不是div本身。将width设置为100%，将height设置为auto，以使图像宽度与浏览器的宽度相同，并且图像高度会在窗口调整大小时自动调整并按比例调整。

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

Answer 4

img标签上缺少属性ID，也是缺失的;在你的css代码中，试试这个：

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

溢出：隐藏不适用于图像

4 个答案: