我正在构建一个网络应用,而我正在使用的当前屏幕每个屏幕包含一个图像。该图像在剩余空间中应完全可见(屏幕减去导航栏)。当设备是纵向或横向倾斜时,图像本身应自动调整为剩余空间。

假设这是标记

<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/

10-12 12:24
查看更多