Question

我有问题，因为我无法自动调整大小＆＃34;在我所说的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

修改

内联类型默认为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;}

在非固定尺寸的容器中安装img

2 个答案: