web-dev-qa-db-ja.com

内部にimgタグがあるdivの高さが間違っています

画像タグが入ったdivがありますが、divの高さが画像より少し大きいようです。

Divに特定の高さ（画像と同じ）を設定することでこの問題を修正できますが、レスポンシブレイアウトで作業しているため、divに特定の高さを設定したくないので、ブラウザウィンドウのスケール（モバイルデバイスなど）では、divがスケーリングして比率を維持します。

Divの高さを画像の高さと正確に一致させる必要があります。

これはシナリオです：

<div class='box'><img src='image.jpg'></div>

Cssは：

img { height: auto; max-width: 100%; width: auto; }

誰かがこの問題を解決する方法を知っていますか？

Screenshot

imagecsshtmlheight
22
user1403825

問題は、画像の自然なスタイリングが画像の下部に少しマージンを与え、控えめに言っても醜いことです。簡単な修正方法は、ブロック、フロート：を画像に残して表示するだけで、スペースがなくなるはずです。

それか、本当に浮かせたくない場合は、画像の境界線を折りたたんで遊ぶことができます。しかし、それはおそらく最終的にはより多くの問題を引き起こすであろう解決策です。

だからそれは次のようなものになるだろう

.box img {
  display: block; /*inline block would be fine too*/
  float: left;
}

それがお役に立てば幸いです。

34
Brodie

最も簡単な方法は、画像の垂直方向の配置を決定することです。

img {
  vertical-align:middle;
}

http://jsbin.com/xozatu/edit?html,css,output

6
Konstantin Barabator

img：ブロックを使用します。それで全部です....

3
user2957214

divをその子img要素と同じ要素にするには：

div {
    display: inline-block;
    padding: 0;
}

div img {
    margin: 0;
}

ただし、spanの代わりにdivを使用することをお勧めします（そうすると、幅がコンテンツの幅に自動的に「折りたたまれ」ます。

span {
    padding: 0;
}
span img {
    margin: 0;
}

JS Fiddle概念実証（両方） 。

2
David says reinstate Monica

動作するシンプルでモダンなソリューションは次のとおりです

div {
    display: flex;
}
0
madhu131313

Divのサイズを設定するだけのことですか？ cssの場合：

.box
{
 height: 10px;
 width:10px;
}

コードで画像を設定することはできませんが、代わりに「ボックス」のDIV背景画像をその画像に設定します。

.box
{
 height: 10px;
 width:10px;
 background:url('/imgURL/filename.gif') white no-repeat;
}

（10pxはもちろん乱数です。必要なサイズに設定してください）

0
InspiredBy