イメージのサイズが変更されたときにコンテナの幅を自動調整する方法は？

Question

私は問題を抱えていますが、わかりやすくするためにここでは簡略化します（本当にイライラしています）。

そう等、（リサイズされると、1つの内部の画像を持っている）私はそれに2つの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プロパティの割合を設定します。私が何を意味するのかを以下に見てください。

旧：

あなたはimgため60%でmax-widthセットを持っており、そのimgのコンテナの試合の幅を持つことを期待することはできません。あなたの答えのための

*, :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>