我想知道如何每次在设定的地方设置图像并将尺寸设置为特定尺寸。这就是我所拥有但它不起作用我仍然得到一个大图像,图像显示在整个容器。我已经尝试将样式更改为图像标签但我仍然遇到同样的问题,有人可以帮助我吗?
<div id="fotos" class="bananas" style="position: absolute;top: 100px;right: 108px" height="80px" width="80px"><img class="modal-content" id="imgdisplay" />
答案 0 :(得分:1)
提供您的图片display:block;
,然后为他们指定width
。您可以在px和%中执行此操作。
至于场地。如果您在图片上使用position:absolute;
,则不会设置相对于.bananas
的位置,因为您已为position:absolute
指定了.bananas
。
您必须将.bananas
更改为position:relative;
。请参阅下面的示例。
.bananas{
position:relative;
border:1px solid red;
height:160px;
width:100%;
}
.bananas img{
display:block;
width:150px;
margin:0;
padding:0;
position:absolute;
top: 30px;
}
#imgdisplay1{
left:10px;
}
#imgdisplay2{
left:170px;
}
<div id="fotos" class="bananas" >
<img class="modal-content" id="imgdisplay1" src="http://images.financialexpress.com/2015/12/Lead-image.jpg"/>
<img class="modal-content" id="imgdisplay2" src="http://images.financialexpress.com/2015/12/Lead-image.jpg"/>
</div>
答案 1 :(得分:0)
我想知道如何每次在设定的地方设置图像
这取决于&#34;设置的位置&#34;是。一般来说,您使用position: absolute;
或position: fixed;
和top bottom left right
将元素放在一个非常具体的位置。
将大小设置为特定大小。
您可以使用width
和height
执行此操作,并使用任何单位为您提供您正在寻找的内容。 px em % vh vw
等等。