你如何使div內的img響應達到最大高度？

-1

我使用普通的舊CSS沒有bootstrap或任何東西。我想讓一個img元素響應，從而縮小和擴大，同時保持其比例達到最大高度。我查看了幾個SO響應，但沒有找到與我的用例相匹配的東西。我將如何實現這一目標。我有這樣的代碼工作。你如何使div內的img響應達到最大高度？

<div class="imageContainer"> 
     <img src="{{employee._image}}"> 
    </div> 


img 
    :max-width 100% 
    :height auto 

.imageContainer 
    max-height: 300px

此方法適用於作爲圖像變得更小，當圖像變大直至此時圖像圖像溢出的div最大高度它的工作原理。我希望它保持在該分區內，同時保持其比例。我已經嘗試過在img和div上使用max-height的各種組合，但還沒有得到它的工作。感謝您提供的任何幫助！

圖像必須動態設置，所以硬編碼的CSS與背景圖像的url不是一個選項。

來源

2017-06-19 Dan

看看這裏。 https://stackoverflow.com/questions/14262938/child-with-max-height-100-overflows-parent/14264093#14264093 – Daniel

謝謝，你的解決方案與繼承關鍵字的伎倆，現在我有中心的問題形象，但這是另一個問題。 – Dan

我在列表中添加了答案，但是如果您可以在沒有的情況下關閉帖子，請繼續。只要搭便車就行了。我也認爲你的中心問題是通過'text-align'屬性完成的，如圖所示。 – Daniel

嘗試設置csstop和bottom屬性0px。

img 
    :max-width 100% 
    :height auto 
    :top 0px 
    :bottom 0px

來源

2017-06-19 18:20:41

要將圖像設置爲div的最大高度，成像儀的height屬性必須從其父項繼承。周圍的答案和理論可以在這裏找到：Child with max-height: 100% overflows parent

.container { 
    background: blue; 
    padding: 10px; 
    max-height: 100px; 
    max-width: 100px; 
    text-align:center; 
} 

img { 
    max-height: inherit; 
    max-width: inherit; 
}

來源

2017-06-19 18:46:38 Daniel

我相信我能實現你的目標是這樣的：

img { 
    max-width: 100%; 
    max-height: inherit; 
}

來源

2017-06-19 20:11:53 dlaub3

你如何使div內的img響應達到最大高度？

回答

相關問題