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

Question

内部に画像タグを含む div があり、div の高さが画像よりも少し大きいように見えます。

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

div の高さが画像の高さとまったく同じである必要があります。

これはシナリオです:

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

CSS は次のとおりです。

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

この問題を解決する方法を知っている人はいますか?

スクリーンショット

score 37 · Accepted Answer

問題は、画像の自然なスタイリングによって、画像の下部にわずかな余白ができて、控えめに言っても見苦しくなってしまうことです。簡単な修正方法は、display: block, float: を画像に残してスペースをなくすことです。

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

最終的には次のようになります

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

それが役立つことを願っています。

score 7 · Accepted Answer

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

img {
  vertical-align:middle;
}

score 6 · Accepted Answer

6

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

于 2013-11-14T09:40:06.450 に答える

score 2 · Accepted Answer

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

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

div img {
    margin: 0;
}

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

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

score 0 · Accepted Answer

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

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

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

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

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

6 に答える 6