圖像會自動按比例調整為剩余的父尺寸（橫向和縱向）

Question

我正在構建一個網絡應用，而我正在使用的當前屏幕每個屏幕包含一個圖像。 該圖像在剩余空間中應完全可見（屏幕減去導航欄）。 當設備是縱向或橫向傾斜時，圖像本身應自動調整為剩余空間。

假設這是標記

<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我最近問了一個類似的問題，但這是完全不同的。 不要混淆/鏈接它們。

Answer 1

您的問題與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。

這是一個小矮人。

圖像會自動按比例調整為剩余的父尺寸（橫向和縱向）

問題描述

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