親divを自動サイズ調整する

Question

サイズを調整した子イメージを親divに配置したいと考えています。この親のdivの子を、子のイメージよりも大きくなくて、どのようにして取得するのですか？例については、下のsnipppetを参照してください。ありがとう。その場合

div { 
 
    border: 1px solid blue; 
 
    width: auto; 
 
    height: auto; 
 
    display: inline-block; 
 
    overflow: auto; 
 
} 
 

 
img { 
 
    background-color: orange; 
 
    width: 80%; 
 
    height: 80%; 
 
    overflow: auto; 
 
}

<div> 
 
    <img src="https://www.python.org/static/opengraph-icon-200x200.png" /> 
 
</div>

Answer 1

あなたはIMGサイズの割合を使用しているという事実は問題です。あなたはあなたのイメージが親divの80％でなければならないと言っているので、div全体を埋めるようにimgに明示しています。 もう1つの問題は、画像がインライン要素であることです。ブロックを変更すると、画像の下部に余分なスペースがなくなります。

は、CSS、私はそれが役に立てば幸い

div { 
    border: 1px solid blue; 
    display: inline-block; 
} 

img { 
    background-color: orange; 
    display: block; 
    width: 90px; 
    height: 90px; 
} 

またPen

を参照してください！

Answer 2

、あなたはimgのwidthは100%こととwidthまたは80%の何か持っている必要がありますする必要があります。

div { 
 
    border: 1px solid blue; 
 
    width: auto; 
 
    height: auto; 
 
    display: inline-block; 
 
    overflow: auto; 
 
} 
 

 
img { 
 
    background-color: orange; 
 
    display: block; 
 
}

<div> 
 
    <img src="https://www.python.org/static/opengraph-icon-200x200.png" /> 
 
</div>

を

プレビュー