Fit an img in a non fixed dimension container

I've got issues because I can't "auto-resize" an img in the div where I've put it, I'm doing this and it doesn't work:

#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>

So I want the img to fit perfectly in this div regardless of the div's dimensions, do you know how to do so please?

Answers


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

No need to add position: relative; and position: absolute; in that case:

#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

By default img tag in inline type so you have a small gap under the img caused by the default vertical-align property which is baseline.

If you change it to vertical-align: top;, no more gaps :)

See it here


Need Your Help

build screenrecord for android 4.2

android android-ndk android-source mediacodec

Is it possible to build screenrecord binary to run on 4.2 , or are there too many missing apis ?