5

画像をhtmlにラップしたいのですが、DIVこれをウィンドウのサイズに合わせて完全にスケーラブルにしたいので、DIV次のようにパーセンテージで幅を設定します。

html

<div id="wrapper">
    <img src="http://openclipart.org/people/netalloy/rally-car.svg" />
</div>

css

#wrapper {
    position: absolute;
    width: 50%;
}

#wrapper img {
    width: 100%;
}

画像はそのコンテナの高さを決定する必要があります。これは、画像の幅が100％に設定され、正しいアスペクト比を維持しながら画像の高さが計算されるためです。

結果はjsfiddleに表示されます：http：//jsfiddle.net/lorenzopolidori/5BN4g/15/

私の質問は次のとおりです。

  1. DIV最近のすべてのブラウザがラッパーを内側の画像より5px高くレンダリングするのはなぜですか？
  2. すべてのサイズをパーセンテージで設定し、JavaScriptを使用せずに、この5pxのギャップを取り除くにはどうすればよいですか？

驚いたことに、これはChrome（21.0.1180.89）、Firefox（15.0.1）、IE8で発生しますが、IE7は正しくレンダリングし、DIVの高さと画像の高さを一致させます。

4

6 に答える 6

2

これをチェックしてください：

http://jsfiddle.net/5BN4g/29/

これは行の高さの問題です:-)

あなたが必要です：

#wrapper {
    width: 60%;
    background-color: #aaa;
    margin: 50px auto;
    line-height:0;
}

#wrapper img {
    width:100%;
    border: 1px dashed red;
    box-sizing:border-box;
}
​

ボックスサイズを使用して、画像の幅がコンテナからはみ出さないようにしました

于 2012-09-25T11:01:15.063 に答える
1

OK、いじくり回して、私は良い可能な解決策を見つけました：

#wrapper img {
    display: block;
    width: 100%;
    border: 1px dashed red;

}

デフォルトのinline表示から表示に変更すると、問題はすぐblockに解消されます。line-height

このアプローチは意味的にも正しいです。この場合、私たちが本当に必要としているのは、DIV他の要素が含まれていない単一の画像であるためline-height、画像をブロックとして表示することで概念を完全に消去する必要があるためです。

すべての主要なブラウザで動作します：http：//jsfiddle.net/lorenzopolidori/5Cpf2/3/

于 2012-09-25T10:58:01.510 に答える
1

..................。

こんにちは今あなたのスローcssを追加vertical-align:topしますimg tag

このように

#wrapper img {
    width: 100%;
    border: 1px dashed red;
    vertical-align:top; // add this line
}

ライブデモ

于 2012-09-25T10:59:39.537 に答える
0

テーブルとして見えないからだと思います

コードにdisplay：tableを追加しました

そして今はうまく見えます、リンクをチェックしてください

表示テーブルの例

于 2012-09-25T11:04:14.480 に答える
0

ブラウザにimgタグを正しく表示させるには、alignプロパティを設定する必要があると思います。

<div id="wrapper">
  <img align="center" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
</div>

デモ

于 2012-09-25T10:57:51.623 に答える
0

あなたの問題は、画像（<img>正確にはタグ）がインライン要素であるということです。画像に設定するだけdisplay: blockで、余分なパディングがなくなります。デモ。

于 2012-09-26T10:49:34.520 に答える