Размер нескольких изображений в контейнере пропорционально изменяется без предварительного вычисления соотношений изображений - PullRequest
Новая
       5

Размер нескольких изображений в контейнере пропорционально изменяется без предварительного вычисления соотношений изображений

0 голосов
/ 11 марта 2019

У меня есть изображения разных размеров в контейнере.Существует основное изображение, которое реагирует на ширину страницы, а затем наложенные и расположенные абсолютно меньшие изображения разных размеров.

Если размер контейнера изменяется, все маленькие изображения изменяют размер и располагаются правильно по отношению к большомуизображение, мне пришлось вручную установить процентную ширину каждого меньшего изображения в процентном соотношении по возрасту к ширине основного изображения. Это код: 

.image-container {
  margin: 10%;
  position: relative;
}

.big-image {
  max-width: 100%;
}

.little-image {
  position: absolute;
  border: 1px solid red;
  display: block;
  max-width: 100%;
  height: auto;
}

.img1 {
  max-width: 10%;
  top: 10%;
  left: 10%;
}

.img2 {
  max-width: 20%;
  top: 50%;
  left: 66%;
}

.img3 {
  max-width: 25%;
  top: 80%;
  left: 20%;
}
<div class="image-container">
  <img class="big-image" src="http://placehold.it/2000x1000" alt="bg" />
  <img class="little-image img1" src="http://placehold.it/200x80" />
  <img class="little-image img2" src="http://placehold.it/400x192" />
  <img class="little-image img3" src="http://placehold.it/500x100" />
</div>

Есть ли способ сделать это без определения процентного соотношения возраста каждого маленького изображения?

В идеале предпочел бы сделатьэто в CSS, но можно использовать JS.

...