使父母身高達到絕對定位孩子的100％

Question

我在Google上搜索了很多，但沒有找到一個好的答案。

假設父元素有兩個子元素：流體圖像（寬度：其父元素的100％）和絕對div元素。 如果我決定覆蓋div以完全適合圖像（當然，如果div沒有太多內容可以覆蓋圖像邊界），我可以。 例：

 *{ box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .container{ position: relative; width: 30%; min-width: 250px; } img{ display: block; width: 100%; } .caption{ display: flex; flex-direction: column; padding: 20px; background-color: rgba(0, 0, 150, .2); position: absolute; top: 0; width: 100%; height: 100%; } .caption .caption-text{margin: auto; text-align: center;} 

 <div class="container"> <img src="https://via.placeholder.com/400x300" alt=""> <div class="caption"> <div class="caption-text"> <h3>Hello World</h3> <p>Some random text</p> </div> </div> </div> 

但是否則，如果我決定完全定位相同的流體圖像以覆蓋div元素，則高度將彼此不相交，這是因為：

• 流體圖像很靈活，但它們基本上會根據其比例進行調整
• 具有文本內容的可變div元素會根據其父元素尺寸調整大小

那么，我該如何使父母的身高准確定位為絕對定位的孩子img的100％身高？

感謝名單

Answer 1

那不是它的工作原理。 position: absolute已從父級流程中刪除。 這實際上意味着： “其父母的行為就像沒有孩子一樣” 。

因此，當您有兩個要重疊的元素時，您可以給它們其中之一賦予position:absolute （該元素應被父元素忽略），而將要確定父 元素 大小的內容保留為未position （或position值為static或relative ）（您可以將其保留在流程中，從而允許其調整父對象的大小）。

有關更多詳細說明，請參見此答案 。

---

如果要基於父級的當前內容調整圖像大小，最好的選擇是將其用作父級的background-image 。 background-size允許它相應地調整大小（ cover ， contain等）：

 *{ box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .container{ position: relative; width: 30%; min-width: 250px; background: url(https://via.placeholder.com/400x300) no-repeat center /cover; } .caption{ display: flex; flex-direction: column; padding: 20px; background-color: rgba(0, 0, 150, .2); } .caption .caption-text{margin: auto; text-align: center;} 

 <div class="container"> <div class="caption"> <div class="caption-text"> <h3>Hello World</h3> <p>Some random text</p> </div> </div> </div> 

注意，我從要調整父級大小的內容中刪除了position:absolute （因為我希望它調整父級大小）。

顯然，您仍然可以通過使用<img>標記並將其放置在絕對位置並確保將其顯示在內容下來實現相同目的，但是background本來就是為此目的開發的，因此使用它更有意義。

對於踢球，這是將<img>放置在絕對位置時的外觀：

a）包含：

 *{ box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .container{ position: relative; width: 30%; min-width: 250px; } .container .positioner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; display: flex; align-items: center; justify-content: center; } .positioner img { max-width: 100%; max-height: 100%; } .caption{ display: flex; flex-direction: column; padding: 20px; background-color: rgba(0, 0, 150, .2); } .caption .caption-text{margin: auto; text-align: center;} 

 <div class="container"> <div class="positioner"> <img src="https://via.placeholder.com/400x300"> </div> <div class="caption"> <div class="caption-text"> <h3>Hello World</h3> <p>Some random text</p> </div> </div> </div> 

b）封面：

 *{ box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .container{ position: relative; width: 30%; min-width: 250px; } .container .positioner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; display: flex; align-items: center; justify-content: center; overflow: hidden; } .positioner img { max-width: 100%; } .caption{ display: flex; flex-direction: column; padding: 20px; background-color: rgba(0, 0, 150, .2); } .caption .caption-text{margin: auto; text-align: center;} 

 <div class="container"> <div class="positioner"> <img src="https://via.placeholder.com/400x300"> </div> <div class="caption"> <div class="caption-text"> <h3>Hello World</h3> <p>Some random text</p> </div> </div> </div>