我正在构建一个网络应用程序，我正在处理的当前屏幕每个屏幕包含一个图像。此图像应在剩余空间(屏幕减去导航栏)中完全可见。当设备倾斜纵向或横向时，图像本身应自动调整到剩余空间。
假设这是标记
<body>
<div class="nav">
// this is 64px height
</div>
<div class="focusCam"> // contains 15px padding inside
<img>
</div>
</body>
我已经尝试过使用 CSS 和 jQuery 中的一个或什至两者的各种方法，但我总是失败。
简单使用
.focusCam img {
max-height:100%;
max-width:100%;
}
不工作。因为在横向时，图像的底部会超出屏幕，从而导致 ScrollView 。
谁能告诉我一个好的解决方案？谢谢。
附注我最近问了一个看起来很像的问题，但这个问题完全不同。不要混淆/链接它们。
最佳答案
您的问题出在 focusCam，而不是 img 属性。
尝试这样的事情:
html,body{height:100%;}
.nav {
position:absolute;
top:0px;
left:0px;
width:100%;
height:64px;
background-color:blue;
}
.focusCam {
padding:79px 15px 15px 15px;
height:100%;
}
请注意 padding top，其中包括用于导航菜单的 64px 和 15px 的内边距。
这是一个 plunker
关于jquery - 图像自动按比例调整大小以适应父级的剩余大小，包括横向和纵向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25325345/