ブラウザで全身を埋めるのはいかがですか？

Question

div{ 
 
    overflow:hidden; 
 
    border:1px solid red; 
 
} 
 
img{ 
 
    width:160px; 
 
    height:160px; 
 
    padding:20px ; 
 
}

<div> 
 
    <img src="http://i.imgur.com/MnmGmN7.jpg" /> 
 
</div>

divが私のFirefoxに全身を記入します。

imgのパディングが40pxに変更された場合、divの幅は160 + 40 + 40 = 240に変更されます。

div{ 
    width:200px; 
    border:1px solid red; 
} 

望ましい効果は以下の通りです。あなたがintrinsic sizingを使用して大丈夫なら

、あなたがfit-contentを使用することができます。

Answer 1

を

divにdisplay: inline-blockを使用すると、それがconに拡張されます親の幅ではなくテントです。

サイドノートで、必須属性にalt="an image description"

div{ 
 
    display: inline-block;  /* added */ 
 
    overflow:hidden; 
 
    border:1px solid red; 
 
} 
 
img{ 
 
    width:160px; 
 
    height:160px; 
 
    padding:20px ; 
 
}

<div> 
 
    <img src="http://i.imgur.com/MnmGmN7.jpg" alt="image description"> 
 
</div>

を忘れてはいけない、それが特定の目的のために必要とされない限り、あなたは、同様のdivせずにこれを行うことができます。

img { 
 
    width:160px; 
 
    height:160px; 
 
    padding:20px ; 
 
    border:1px solid red; 
 
}

<img src="http://i.imgur.com/MnmGmN7.jpg" alt="image description">

Answer 2

は、ここではいくつかの選択肢があります。しかし、IE/Edgeはこれらの値をまったくサポートしていません。代替案として

div { 
 
    border: 1px solid red; 
 
    width: -moz-fit-content; 
 
    width: -webkit-fit-content; 
 
    width: fit-content; 
 
} 
 
img { 
 
    width: 160px; 
 
    height: 160px; 
 
    padding: 20px; 
 
}

<div> 
 
    <img src="http://i.imgur.com/MnmGmN7.jpg" /> 
 
</div>

、あなたは常に、コンテナ上のサイズを指定して、画像にそのようなコンテナの割合にすることができます。

div { 
 
    border: 1px solid red; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
img { 
 
    width: 80%; 
 
    height: 80%; 
 
    padding: 10%; 
 
}

<div> 
 
    <img src="http://i.imgur.com/MnmGmN7.jpg" /> 
 
</div>