图像会自动按比例调整为剩余的父尺寸（横向和纵向）

Question

I'm building a web app and this current screen I'm working on contains one image per screen. 我正在构建一个网络应用，而我正在使用的当前屏幕每个屏幕包含一个图像。 This image should be completely visible in the remaining space (screen minus navigation bar). 该图像在剩余空间中应完全可见（屏幕减去导航栏）。 When the device is either tilted portrait or landscape, the image itself should automatically adjust to the remaining space. 当设备是纵向或横向倾斜时，图像本身应自动调整为剩余空间。

Let's say that this is the markup 假设这是标记

<body>
   <div class="nav">
      // this is 64px height
   </div>
   <div class="focusCam"> // contains 15px padding inside
      <img>
   </div>
</body>

I've tried various methods with either or even both CSS and jQuery, but I keep failing. 我尝试过使用CSS或jQuery甚至不使用CSS和jQuery的各种方法，但是我一直失败。

Simply using 只需使用

.focusCam img {
  max-height:100%;
  max-width:100%;
}

Isn't working. 没用 Because when in landscape, the bottom part of the image exceeds the screen, resulting in a scroll view. 因为在横向时，图像的底部超出了屏幕，从而产生了滚动视图。

Who can tell me a great solution? 谁能告诉我一个很好的解决方案？ Thanks. 谢谢。

ps I've recently asked a look-a-like question, but this one is completely different. ps我最近问了一个类似的问题，但这是完全不同的。 Don't confuse/link them. 不要混淆/链接它们。

Answer 1

Your issue is with focusCam, not the img property. 您的问题与focusCam有关，而不是img属性。

Try something like this: 尝试这样的事情：

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

Note the padding top which includes 64px for the nav menu and 15px of padding. 请注意填充顶部，其中包括用于导航菜单的64px和填充的15px。

Here's a plunker for it. 这是一个小矮人。

图像会自动按比例调整为剩余的父尺寸（横向和纵向）

问题描述

1 个解决方案

解决方案1
2 2014-08-15 11:15:46

图像会自动按比例调整为剩余的父尺寸（横向和纵向）

问题描述

1 个解决方案

解决方案1 2 2014-08-15 11:15:46

解决方案1
2 2014-08-15 11:15:46