固定されていないディメンションのコンテナにimgを取り付ける

Question

私はそれを置いたdivのimgを "自動サイズ変更"できないので問題が発生しました。私はこれをやっていて動作しません：

#slider img{ 
position:relative; 
border:none; 
display:none; 
height: 100%; width: 100%;} 

#slider { 
background:#fff url(loading.gif) no-repeat 50% 50%; 
margin-left: 10%; 
margin-right: 15%; 
position:absolute; 
width:75%;height:50%; 
transform: translate3d(0,0,0); 
box-shadow: 0px 1px 5px #999999;} 

<div id="slider"> 

     <img src="SAM_3142.JPG"border=0 /> 
</div> 

は、だから私はあなたがそうしてください行う方法を知っています、IMGは、これはdiv要素の大きさに関係なく、DIVに完璧にフィットするようにしたいですか？

Answer 1

その場合にはposition: relative;とposition: absolute;を追加する必要はありません：

#slider img{ 
width: 100%; 
} 

#slider { 
background:#fff url(loading.gif) no-repeat 50% 50%; 
margin-left: 10%; 
margin-right: 15%; 
width:75%; 
box-shadow: 0px 1px 5px #999999;} 

See it here

EDIT imgタグインラインタイプでは、デフォルトで

あなたはimgの下に小さなギャップを持っているので、デフォルトのvertical-alignというプロパティ（baseline）によって発生します。

あなたはvertical-align: top;に変更した場合は、これ以上のギャップ:)

See it here

Answer 2

このDemoを試してみません：

#slider img{ 
display: inline-block; 
border:none; 
//display:none; 
height: 100%; width: 100%;} 

#slider { 
display: inline-block; 
background:#fff url(loading.gif) no-repeat 50% 50%; 
margin-left: 10%; 
margin-right: 15%; 
transform: translate3d(0,0,0); 
box-shadow: 0px 1px 5px #999999;}