html - 将 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>

因此，无论 div 的尺寸如何，我都希望 img 完美适合此 div，请问您知道该怎么做吗？

Answer 1

试试这个 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;}