Auto resize div to fit two (or more) stacked pictures in it

Question

I have a div with display: inline-block that has two or more IMGs in it. IMGs are "stacked" on top of each other (I also have script that sets z-index when necessary), so I use position: absolute; top: 0; left: 0; for these IMGs. I need to resize containing div to fit the biggest image in it. The problem is, that images are loaded dynamically and have different sizes and I need to resize containing div to fit the biggest one currently in it. When I don not use no position: absolute, containing div resizes automatically to fit the image, but in that case I cannot place images on top of each other. So, is it possible to achieve this with css only? The goal is to have several images with unknown sizes stacked on top of each other. Thank you.

(snippet is for illustration only)

window.onload=function()
{
  let lastPic=1;
  
  setInterval(function()
  {
    let pics=document.querySelectorAll(".pic");
    pics[lastPic].style.zIndex="";
    lastPic=Math.ceil(Math.random()*3);
    pics[lastPic].style.zIndex="3";
  }, 1000);
  
};

div#container
{
  display: inline-block;
  border: 1px solid black;
  background: black;
  padding: .5em;
}

img.pic
{
  position: absolute;
  top: 0;
  left: 0;
  opacity: .9;
}

div#container img:nth-child(1)
{
  border: 1px solid #f00;
  background: rgba(255,0,0,.5);
}
div#container img:nth-child(2)
{
  border: 1px solid #00f;
  background: rgba(0,0,255,.5);

}
div#container img:nth-child(3)
{
  border: 1px solid #0f0;
  background: rgba(0, 255,0,.5);
}
div#container img:nth-child(4)
{
  border: 1px solid #0ff;
  background: rgba(0,255,255,.5);

}

<!doctype html>
<body>

<div id="container">
<img class="pic" src="https://dom.etogo.net/picsrotate/test/1.png">
<img class="pic" src="https://dom.etogo.net/picsrotate/test/2.png">
<img class="pic" src="https://dom.etogo.net/picsrotate/test/3.png">
<img class="pic" src="https://dom.etogo.net/picsrotate/test/4.png">
</div>

</body>
</html>

Just create a css grid container with one column and one row, and place all images inside specifying `grid-column-start: 1; grid-row-start: 1;` for each image. — connexo, Sep 12 '18 at 09:54
Possible duplicate of [Position: absolute and parent height?](https://stackoverflow.com/questions/13545947/position-absolute-and-parent-height) — Chris Li, Sep 12 '18 at 09:55

Paulie_D · Accepted Answer · 2018-09-12T09:58:47.937

Instead of position:absolute, use display:grid (in this case display:inline-grid so it shrink wraps the images) and put all the images in the same row & column.

Note: older versions of Internet Explorer either do not support CSS-Grid or support an older version of the specification and will require specific -ms- grid properties.

div#container {
  display: inline-grid;
  border: 1px solid black;
  padding: 0.5em;
}

img.pic {
  grid-row: 1;
  grid-column: 1;
  opacity: 0.9;
  display: block;
}

div#container img:nth-child(1) {
  border: 1px solid #f00;
  background: rgba(255, 0, 0, 0.5);
}

div#container img:nth-child(2) {
  border: 1px solid #00f;
  background: rgba(0, 0, 255, 0.5);
}

div#container img:nth-child(3) {
  border: 1px solid #0f0;
  background: rgba(0, 255, 0, 0.5);
}

div#container img:nth-child(4) {
  border: 1px solid #0ff;
  background: rgba(0, 255, 255, 0.5);
}

<div id="container">
  <img class="pic" src="https://dom.etogo.net/picsrotate/test/1.png">
  <img class="pic" src="https://dom.etogo.net/picsrotate/test/2.png">
  <img class="pic" src="https://dom.etogo.net/picsrotate/test/3.png">
  <img class="pic" src="https://dom.etogo.net/picsrotate/test/4.png">
</div>

So fast. I just wrote that as a comment while you already have it as an answer. — connexo, Sep 12 '18 at 09:55
It might be worth mentioning (and adding) the rules needed for IE10+. — connexo, Sep 12 '18 at 09:56
Also your introductory text recommends to use `display: grid;` while your actual code uses `display: inline-grid;`. — connexo, Sep 12 '18 at 09:58

Auto resize div to fit two (or more) stacked pictures in it

1 Answers1