如何調整內部圖像大小時自動調整容器寬度？

Question

我遇到了一個問題，爲了清晰起見，我將在這裏進行簡化（它令我非常沮喪）。

我在它與兩個div的容器（和一個具有圖像內，這將被調整），如下所示：

HTML

<div id="container"> 

<div id="block1"> 

    <img src="images/clank.png"> 

</div> 

<div id="block2"> 

</div> 

</div> 

CSS

#container { 
height:350px; 
background-color: #000 

} 

img { 

max-width: 60%; 
height: auto; 

} 

#block1 { 
background-color: #fff; 
float:left; 
height:auto; 
width: auto; 
border-style: solid; 
border-width: 1px; 
border-color: #000; 
} 

#block2 { 
background-color: #456545; 
height:100%; 
overflow: hidden; 
} 

Here is an image with the problem

上面的圖片說明了我的問題。在＃block1內部調整圖像大小之後，＃block1的高度降低，與圖像（這是我想要的）相同的新高度。但是，我希望寬度也能做到這一點，但這並沒有發生。寬度保持不變，因此＃block1的寬度不會更改爲等於圖像的新大小（它保持原始圖像的大小）。我希望＃block1的寬度根據圖像新的較小尺寸自動縮小。

這是可能通過CSS？

感謝

Answer 1

更新：

在你不想讓你的img元素佔據含div的全尺寸的情況下，你可以通過的比例縮放的img元素通過設置padding屬性的百分比來確定高度和寬度的容器。請參閱下面的我的意思。

老：

你不能有max-width定在60%爲img，並期望有容器的寬度相匹配的img的。請參見下面的時候我已經刪除了max-width限制：

*, :before, :after { 
 
box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#container { 
 
    height: 350px; 
 
    background-color: #000 
 
} 
 

 
img { 
 
    width: 100%; 
 
    padding: 0 50% 50% 0; 
 
} 
 

 
#block1 { 
 
    background-color: #fff; 
 
    float: left; 
 
    height: auto; 
 
    width: 20%; /* change this to see that the div fits the image properly. */ 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #000; 
 
} 
 

 
#block2 { 
 
    background-color: #456545; 
 
    height: 100%; 
 
    overflow: hidden; 
 
}

<div id="container"> 
 
    <div id="block1"> 
 
    <img src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97300&w=200&h=300"> 
 
    </div> 
 
    <div id="block2"> 
 
    </div> 
 
</div>