Question

我有一个display: inline-block的div，其中有两个或多个IMG。 IMG彼此堆叠（我也有在必要时设置z-index的脚本），因此我对这些IMG使用position: absolute; top: 0; left: 0;。我需要调整包含div的大小以适合其中的最大图像。问题是，图像是动态加载的并且具有不同的大小，我需要调整包含div的大小以适合当前其中最大的一个。当我不使用任何position: absolute时，包含div的大小会自动调整以适合图像，但是在那种情况下，我无法将图像彼此叠加。那么，是否有可能仅使用CSS来实现？目标是将几张大小未知的图像彼此堆叠。谢谢。

（摘要仅用于说明）

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>

Answer 1

使用position:absolute （在这种情况下为display:grid，以便缩小包装图像）来代替display:inline-grid ，并将所有图像放在同一行中，列。

注意：Internet Explorer的旧版本要么不支持CSS-Grid ，要么支持该规范的旧版本，并且将需要特定的-ms- grid属性。

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>

自动调整div的大小以适合其中两张（或更多）堆叠的图片

1 个答案: