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

Question

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

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

Answer 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>

Answer 2

i would like ti know how to set an image in a set place every time

这取决于 "set place" 的位置。一般来说，您使用 position: absolute; 或 position: fixed; 和 top bottom left right 来将元素放在非常特定的位置。

set the size to a specific size.

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

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

setting image in a specific place in container

css

position

image

image-resizing