CODEWITHSUNDEEP
htmlcss
NewBie
NewBie

Reputation: 3584

Divs using inline-block are overlapping when parent element is resized

On my webpage there are Gridster widgets which have multiple images in them.Images can be added with + button.The widgets can be resized as well.

I am displaying these images inside div with class=imagewrap and the images have class images with them.

My overall aim

  1. To display multiple images on each widget with there aspect ratio maintained(as far as possible).Atleast they should look proper.
  2. Images should be within that div only
  3. To increase/decrease the size of image when the widget is resized.

What I have achieved/tried so far

I am able to place the image in divs (but I have seen that some images do not lie within the div but come out of it) and then placing those div on the widget. I am not sure the approach which I have used for that is proper or not.

I have declared class imagewrap which forms a div for the images.It is as follows:

.imagewrap {
  display:inline-block;
  position:relative; 

  min-height: 50px;
  min-width:  50px;
/*
  max-height: 100px;
  max-width:100px;
*/
  width: 25%;

  margin-top: 10px;
  margin-right: 4px;
  margin-left: 4px;
  margin-bottom: 4px;
}

Each image is having a class images which is a follows

.images {
  position: absolute;
  /*height: 100%;   commented to keep the aspect ratio when the widget is resized*/
  width: 100% ;
  top: 0;
  left: 0;
}

HTML Code where the images are placed

<div class="imagewrap"><img class="images" src='+ images[j] +' title="' + titles[j]+ '"><input type="button" class="removediv" value="X" /></div></div>

The problem I am facing

When I resize the widget the images tend to overlap each other.I am not getting how to fix it.

Fiddle In fiddle as you resize/stretch the widget.The images start to overlap

If anyone feel that class which I declared are wrong in itself considering the output that I want then please change them as well

Upvotes: 1

Views: 1194

Answers (2)

shekhar677
shekhar677

Reputation: 89

Ok here is the fix, just change some properties in .images class.

.images {
/* position: absolute; */
/*height: 100%; */
width: 100% ;
/* top: 0; */
/* left: 0; */
object-fit: contain;
}

Upvotes: 1

Akanksha Sharma
Akanksha Sharma

Reputation: 281

I think in order to keep images inside containers you have to provide max-width: 100% and max-height:100% to images. After that you can provide height and width to class imagewrap.

Try this: 

.imagewrap {
  display:inline-block;
  position: relative;

  max-height: 50px;
  max-width:  50px;

  width: 25%;

  margin-top: 10px;
  margin-right: 4px;
  margin-left: 4px;
  margin-bottom: 4px;
}


.images {
  max-width:100%;
  max-height:100%;
}

Upvotes: 4

Related Questions