Как мне сделать div с перекрывающимся содержимым масштабировать с размером окна и быть по центру? - PullRequest
Новая
       0

Как мне сделать div с перекрывающимся содержимым масштабировать с размером окна и быть по центру?

0 голосов
/ 06 апреля 2020

У меня есть несколько изображений, которые я хочу разместить внутри элемента div, перекрывая друг друга (в основном на прозрачном фоне каждого изображения PNG). Я хочу, чтобы весь набор изображений находился внутри шкалы div и перемещался так, чтобы он выглядел одинаково, но с меньшим размером при изменении размера окна браузера. Как я могу это сделать, а также иметь центр Div горизонтально в окне браузера?

У меня есть пример проблемы, с которой я сталкиваюсь в JSFiddle:

https://jsfiddle.net/vug5yrdb/16/ 

<html>

<head>
    <meta charset="utf-8">
    <style type="text/css">
        .gwd-img-1kkt {
          position: absolute;
          left: 1.76%;
          top: 1.04%;
          width: 25.2%;
          height: 47.24%;
        }

        .gwd-img-1c79 {
          position: absolute;
          left: 2.08%;
          top: 28.88%;
          width: 25.2%;
          height: 29.2%;
        }
        .gwd-img-12uj {
          position: absolute;
          left: 0.06%;
          top: -7.61%;
          width: 35.22%;
          height: 79.77%;
        }

        .wrapper {
          position:relative;
          padding: 100%;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <img src="https://i.imgur.com/KG8oR83.png" id="red-bit" class="gwd-img-1kkt">
        <img src="https://i.imgur.com/GQqpTkb.png" id="teal-bit" class="gwd-img-1c79">
        <img src="https://i.imgur.com/iBIXHX3.png" id="blue-bit" class="gwd-img-12uj">
    </div>
</body>

</html>

Эта версия масштабируется соответствующим образом, но не центрируется и растягивается.

1 Ответ

0 голосов
/ 06 апреля 2020

Вы можете настроить свой код, как показано ниже. Я добавил границу для иллюстрации центрирования: 

.gwd-img-1kkt {
  position: absolute;
  left: 20.52%;
  top: 2.08%;
  width: 50.4%;
  height: 94.48%;
}

.gwd-img-1c79 {
  position: absolute;
  left: 21.16%;
  top: 57.76%;
  width: 50.4%;
  height: 58.4%;
}

.gwd-img-12uj {
  position: absolute;
  left: 17.12%;
  top: -15.22%;
  width: 70.44%;
  height: 159.54%;
}

.wrapper {
  position: relative;
  width:50%; /* this will control the horizontal size*/
  margin:50px auto;
  outline:1px solid;
}
.wrapper::before {
  content:"";
  display:block;
  padding-top:70%; /* this will control the vertical size */
}
<div class="wrapper">
  <img src="https://i.imgur.com/KG8oR83.png" id="red-bit" class="gwd-img-1kkt">
  <img src="https://i.imgur.com/GQqpTkb.png" id="teal-bit" class="gwd-img-1c79">
  <img src="https://i.imgur.com/iBIXHX3.png" id="blue-bit" class="gwd-img-12uj">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...