imgサイズをオーバーフローさせないように設定するには？

固定高さのdivがあります。これには、テキストとimg要素のあるスパンが含まれています。 imgの高さをdivの高さからスパンの高さを差し引いた値に設定するにはどうすればよいですか？imgサイズをオーバーフローさせないように設定するには？

サンプルコード：

<html> 
<head> 
<style type="text/css"> 
div { height: 100px; width: 800px; border-style:solid;} 
img { display: block} 
</style> 

</head> 
<body> 
<div> 

<span>hello world</span> 
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> 

</div> 
</body> 
</html>

編集：注意：高さ/幅は固定値ですが、未知の変数です。

出典

2017-09-19 KevinFox

このスニペットに見て、あなたはJavaScriptを試すことはできますか？ –

私はそう思います...それは唯一の方法ですか？ – KevinFox

flexboxがオプションである場合、あなたはdivにこれを追加することができます。

display: flex; // set a flexbox container 
    flex-direction: column; // column placement 
    align-items: flex-start; // prevent default stretching in cross-axis (horizontal)

をし、画像にmax-height: 100%とmin-height: 0を追加（min-height: 0を追加spanまで） - 以下のデモをご覧ください：

div { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
    height: 100px; 
 
    width: 800px; 
 
    border-style: solid; 
 
} 
 

 
img { 
 
    display: block; 
 
    min-height: 0; 
 
    max-height: 100%; 
 
} 
 
span { 
 
    min-height: 0; 
 
}

<div> 
 
    <span>hello world</span> 
 
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" /> 
 
</div>

出典

2017-09-19 03:58:25 kukkuz

私は個人的に試しました。

<html> 
<head> 
<style type="text/css"> 
div { height: 100px; width: 800px; border-style:solid;} 
img { display: block;width:100%;height:100%;} 
</style> 

</head> 
<body> 
<div> 

<span>hello world</span> 
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> 

</div> 
</body> 
</html>

出典

2017-09-19 03:34:56 FreedomPride

動作しますか？それは長方形の中に収まるようには思われません... – KevinFox

@KevinFox、私は解答と説明を編集しました – FreedomPride

は、あなたのCSSでこれを追加し合うようにあなたのIMGの100％を置く：高さがダウンしたのはなぜ

<p>Hello World</p>のように、それはコードが

スペースを作成しますので、少しそれはですあなたのdivの高さ。

img{ 
display: block; 
height: 100%; 
}

これはテキスト用ですが、divにイメージを収めたい場合は、テキストに絶対値を使用できます。

span{ 
position: absolute; 
}

出典

2017-09-19 03:35:47

この場合、スパンとimgは重なりますか？ – KevinFox

はい..あなたが望む正確な出力をスクリーンショットで与えることができますか？私にサンプルを送ってください。私はあなたに助けになります..質問は少し混乱しています。 –

基本的に私はテキストとimgの両方を重複していないか、あふれていない同じdivです... – KevinFox

CSS3 box-sizing propertyこのようにしてください。

あなたのhtmlの

div { 
    height: 100px; 
    width: 800px; 
    border-style:solid; 
    box-sizing: border-box; 
}

：

<div> 

    <span>Lorem Ipsum is including versions of Lorem Ipsum</span> 
    <div> 
     <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" /> 
    </div> 

</div>

出典

2017-09-19 03:44:45

どちらも機能していないようですが、imgはまだ枠外にあります – KevinFox

私は、CSS calcプロパティでこれをやっている

img { 
    display: block; 
    max-height: calc(100% - 20px); 
}

div { 
 
    height: 100px; 
 
    width: 800px; 
 
    border-style: solid; 
 
    float: left; 
 
} 
 
img { 
 
    display: block; 
 
    max-height: calc(100% - 20px); 
 
}

<div> 
 
\t <span>hello world</span> 
 
\t <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> 
 
</div>

出典

2017-09-19 04:29:18

imgサイズをオーバーフローさせないように設定するには？

答えて

関連する問題