盡管最大高度設置為100％，但圖像變得比父圖像大

Question

我正在嘗試使用<img>標簽在另一張div上顯示照片，作為某種疊加層。 但是，圖片不會縮放到其父div（頁面的主體）的內部。 相反，它溢出了身體。 當我設置overflow: hidden; 到正文，您無法在頁面上滾動。 我希望圖像全高並適合身體（不擴大身體）。

這基本上是頁面的結構：

<html>
   <body>
      <div class="imgContainer">
         <img class="actualImage" />
      </div>
      <div class="restOfBody">
      </div>
   </body>
</html>

和CSS：

body {
  background-image: url(*some background photo*)
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  padding: 0;
  margin: 0;
  max-height: 100%;
}

.imgContainer {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  max-height: inherit;
}

.actualImage {
  max-height: 100%;
}

這基本上就是現在正在發生的事情：現在在文本上繪制的圖像將頁面向下推到現在為止，以至於它實際上超出了html的正文。

Answer 1

在使用meta作為高度之前，以％為單位的高度將不起作用，好的，請在溢出的地方使用overflow：hidden：none

Answer 2

使您的圖像作為背景圖像。 我認為會更好。

Answer 3

如圖所示，在您的體內添加一個容器，

<body>
    <div class="container">
        <div class="imgContainer">
            <img class="actualImage" src="banner.jpg">
        </div>
    </div>
</body>

並在CSS中執行此操作

.container {
    width: 200px;/*sample width*/
    height: 200px;/*sample height*/
    overflow: hidden;
}
.imgContainer {
  position: relative;
  top: 0;
  left: 0;
  max-height: inherit;
}

.container負責設置邊界，並使用overflow: hidden ，防止.container內容重疊。 如果使用.imgContainer來確保位置相對於容器，則absolute會將自身拉出流程，這在您的情況下是不安全的。

盡管最大高度設置為100％，但圖像變得比父圖像大

問題描述

3 個解決方案

解決方案1
0 2016-08-13 15:25:12

解決方案2
0 2016-08-13 15:32:56

解決方案3
0 2016-08-13 15:33:19

盡管最大高度設置為100％，但圖像變得比父圖像大

問題描述

3 個解決方案

解決方案1 0 2016-08-13 15:25:12

解決方案2 0 2016-08-13 15:32:56

解決方案3 0 2016-08-13 15:33:19

解決方案1
0 2016-08-13 15:25:12

解決方案2
0 2016-08-13 15:32:56

解決方案3
0 2016-08-13 15:33:19