浮動小数点数の内のパーセンテージで高さの画像をラップする

本当に明白な質問を申し訳ありません。私はそれが本当に簡単な答えを持っていると確信しています。浮動小数点数の内のパーセンテージで高さの画像をラップする

非常に単純に、画像がdivの高さの100％を埋めるdivの内部に画像を配置したいと考えています。任意の非WebKitの中で見たとき

CSS

.container{ 
     height:100%; 
     float:left;} 

img { 
     height:100%;}

HTML

<div class="container"> 
     <img src="xyz.jpg" /> 
</div>

結果は予想通りであるが、（DIV内）の画像の右側に空白の大量とブラウザ。

私のレイアウトでは、divの幅が画像の幅に縮小するように、これらのdivの多くが（フロートで）並べられています。デフォルトでは

2011-12-02 osnoz

、指定された高さ寸法のないdivは、その内容を包含するのに十分で展開します。指定された幅がない場合、divは親の幅に拡大されます。したがって、幅を指定するまで、divの幅は画像に縮小されません。

divがそのコンテナ高さとの関係である100%高さ、ない、その内容に設定されているあなた。

また、イメージ自体に100%を指定する必要はありません。これにより、画像は伸縮から容器の高さの100％になります。コンテナの高さを指定しない限り、これは無意味です。

2011-12-02 22:31:24 Sparky

申し訳ありませんで例を参照してくださいが、事は明確にしなかった、Tは画像が欲しいです身長の100％である容器の高さの100％まで伸びる。 – osnoz

@osnoz、私はあなたがjsFiddleの例を投稿すべきだと思います。また、あなたが望むのは私の答えを無効にしません。 divを水平方向に展開したくない場合は、幅を指定する必要があります。 – Sparky

divを内容に合わせて展開したいのですが、それが何であるか分からないので幅を指定できません（パーセンテージレイアウト） – osnoz

私は右の質問を理解している場合、私は知らないが、ここではそれが行く：

.container { display: inline-block; height: 100%; } 
.container img { height: 100%; }

2011-12-04 02:19:23 vlgalik

答えて