將div調整爲圖像大小

Question

通常情況下，我使用背景圖像將圖像調整爲div，具體取決於寬度和高度屬性。現在我有完全相反的問題。

我想要做的是調整div大小的圖像，但最大的寬度和高度。假設圖像是200x200，div必須調整到這個大小，但如果圖像超過300x300，它必須受到限制。

任何想法，我應該怎麼做呢？

Answer 1

您可以將max-width和max-height樣式屬性應用於圖像元素。

根據您需要包含的元素做什麼，這可能工作：

<div> 
    <div style="position: absolute;">Element content here</div> 
    <img src="image.png" style="max-width: 300px; max-height: 300px;" /> 
</div> 

Answer 2

什麼是你的頁面的結構？

我猜你用這樣的：

<div id="container"> 
    <img src="img.jpg" /> 
</div> 

<style> 
    #container { 
     display: inline-block; 
     border:1px solid blue; 
     max-width:300px; 
     max-height:300px; 
    } 
</style>