2017-01-13 70 views
0

我想知道如何在每次设置的位置设置图像并将尺寸设置为特定尺寸。这是我有,但它不工作,我仍然得到一个大的图像,图像显示在整个容器。我试图改变风格的图像标记,但我仍然遇到同样的问题有人可以帮我吗?在容器中的特定位置设置图像

<div id="fotos" class="bananas" style="position: absolute;top: 100px;right: 108px" height="80px" width="80px"><img class="modal-content" id="imgdisplay" /> 

回答

1

给你的形象display:block;,然后指定width他们。你可以在px和%中使用它。

设定的地方。如果您在图片上使用position:absolute;,则它不会将其设置为相对于.bananas的位置,因为您已为.bananas指定了position:absolute

您必须将.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>

+0

当我上传多个图像并让他们每次做可拖动时都显示在同一个确切位置时,位置会是什么。现在每次我上传图片上传在每个早期的图像下面的图像,并且它在4次上传后消失 – user7368271

+0

没关系,绝对的是它从正常的内容流中去除了该元素。如果第一张图片的左侧为10px,则第二张图片的左侧为160px;或者更多。我已经更新了我的例子。 – ab29007

+0

在动态内容条件下使用绝对值可能是一件坏事。当你知道你的内容不会改变时使用绝对值。 – ab29007

0

我想TI知道怎么每次

这取决于那里的“设置场所”图像设置一组地方。一般而言,您使用position: absolute;position: fixed;top bottom left right将元素放置在非常特定的位置。

将尺寸设置为特定尺寸。

你做到这一点与widthheight和使用任何单位给你你在找什么。 px em % vh vw