我正在构建一个网络应用,而我正在使用的当前屏幕每个屏幕包含一个图像。该图像在剩余空间中应完全可见(屏幕减去导航栏)。当设备是纵向或横向倾斜时,图像本身应自动调整为剩余空间。
假设这是标记
<body>
<div class="nav">
// this is 64px height
</div>
<div class="focusCam"> // contains 15px padding inside
<img>
</div>
</body>
我尝试过使用CSS或jQuery甚至不使用CSS和jQuery的各种方法,但是我一直失败。
只需使用
.focusCam img {
max-height:100%;
max-width:100%;
}
没用因为在横向时,图像的底部超出了屏幕,从而产生了滚动视图。
谁能告诉我一个很好的解决方案?谢谢。
ps。我最近问了一个类似的问题,但是这个问题完全不同。不要混淆/链接它们。
最佳答案
您的问题与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%;
}
请注意填充顶部,其中包括用于导航菜单的64px和填充的15px。
这是一个plunker。
关于jquery - 图像会自动按比例调整为剩余的父尺寸,包括横向和纵向,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25325345/