Установите img в контейнер с фиксированным размером

Question

У меня проблемы, потому что я не могу «автоматически изменить размер» img в div, где я его положил, я делаю это, и он не работает :

#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 независимо от размеров в Див, то просто вы знаете, как сделать это, пожалуйста?

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;}