Search code examples
cssimagepositionimage-resizing

setting image in a specific place in container

i would like ti know how to set an image in a set place every time and set the size to a specific size. this is what i have but its not working i still get a large image and the images show up all over the container. i have tried changing the style to image tag but i still get the same problem can someone please help me ?

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

  • Give your image display:block; and then specify width for them. You can do it in px as well as in %.

    As for the set place. If you use position:absolute; on the image then it would not set it's position relative to .bananas, because you have specified position:absolute for .bananas.

    You'd have to change .bananas to position:relative;. See the example below.

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