Автоматическое изменение размера div для размещения двух (или более) сложенных картинок - PullRequest
Новая
       3

Автоматическое изменение размера div для размещения двух (или более) сложенных картинок

0 голосов
/ 12 сентября 2018

У меня есть div с display: inline-block, в котором есть два или более IMG. IMG «накладываются» друг на друга (у меня также есть скрипт, который устанавливает z-index при необходимости), поэтому я использую position: absolute; top: 0; left: 0; для этих IMG. Мне нужно изменить размер, содержащий div, чтобы соответствовать наибольшему изображению в нем. Проблема в том, что изображения загружаются динамически и имеют разные размеры, и мне нужно изменить размер, содержащий div, чтобы он соответствовал самому большому в настоящее время. Когда я не использую no 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>

1 Ответ

0 голосов
/ 12 сентября 2018

Вместо 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...