在容器中的特定位置设置图像答案

【问题标题】：setting image in a specific place in container在容器中的特定位置设置图像
【发布时间】：2017-01-13 11:22:29
【问题描述】：

我想知道如何每次都在设定的位置设置图像并将尺寸设置为特定尺寸。这就是我所拥有的，但它不工作我仍然得到一个大图像并且图像显示在整个容器中。我已经尝试将样式更改为图像标签，但我仍然遇到同样的问题，有人可以帮我吗？

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

【问题讨论】：

标签： css image position image-resizing

【解决方案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>

【讨论】：

当我上传多张图像并让它们在每次我进行可拖动时都显示在同一个确切位置时，位置会是什么。现在每次我上传图片时，图片都会在之前的每张图片下方上传，并且在 4 次上传后消失
好的，absolute 的问题是它从正常的内容流中删除了该元素。如果第一张图片有left:10px，那么第二张图片应该有left:160px; 或更多。我已经为此更新了我的示例。
在动态内容条件下使用绝对可能是一件坏事。当您知道您的内容不会改变时，请使用绝对。
感谢您花时间向我解释这一点。谢谢你的精彩回答。
绝对是我使用的，并且每次上传时它仍然在不同的位置上传

【解决方案2】：

我想知道如何每次都在固定的位置设置图像

这取决于“设置地点”在哪里。一般而言，您使用position: absolute; 或position: fixed; 和top bottom left right 将元素放在非常特定的位置。

将大小设置为特定大小。

您可以使用width 和height 来实现这一点，并使用任何单位来满足您的需求。 px em % vh vw等

【讨论】：