Масштабирование всего содержимого в элементе div, как будто один элемент - PullRequest
Новая
       14

Масштабирование всего содержимого в элементе div, как будто один элемент

0 голосов
/ 26 августа 2018

У меня есть два изображения, расположенные друг над другом в div с подписью внизу.Я хотел бы, чтобы все эти элементы масштабировались пропорционально и вместе по мере уменьшения размера окна браузера.

В настоящее время положение двух изображений смещается и выглядит не одинаково на мобильных устройствах. 

.highlightimg {
max-width: 700px;
height: auto;
width: 100%;
display: block;
position: relative;
z-index: 1;
padding-top: 10vh;
margin-right: 0;
}
.showcase {
max-width: 750px;
margin:auto;
position: relative;
margin-top: 8vh;
margin-bottom: 8vh;
}
.logo {
left:0;
max-width: 400px;
width: 100%;
height: auto;
position: absolute;
z-index: 3;
left: 0px;
}
.caption {
margin-top: 10px;
margin-bottom: 0;
padding: 0;
text-align: right;
}
<div class="showcase">
    <img src="logo.png" class="logo">
    <img src="highlight.jpg" class="highlightimg">
    <p class="caption">Caption text here.</p>
</div>
Лучшей аналогией для продукта, который я пытаюсь получить, является группирование нескольких слоев в Photoshop, что позволяет масштабировать все слои вместе, как если бы это было одно изображение.Я новичок в HTML / CSS, поэтому я надеюсь, что это имеет смысл и не слишком часто спрашивают.Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 26 августа 2018

Положение логотипа относительно изображения под ним обязательно сместится. Одна из причин этого заключается в том, что вы используете vh единицу для некоторых свойств, включая padding-top из .highlightimg. 10vh в настольных и мобильных устройствах различны (оба имеют разные размеры области просмотра). Если вы хотите, чтобы оба элемента оставались одинаковыми, закрепите оба элемента слева и сверху, установив по крайней мере постоянные свойства padding-top, margin-top или top (включая отступы слева и поля).

Может быть, добавление top: 18vh; к .logo может помочь. Использование top: 10vh; вместо 18vh при удалении margin-top: 8vh из .showcase также может помочь. Это должно гарантировать, что верхнее смещение .highlightimg, обеспечиваемое его свойством padding-top, пропорционально верхнему смещению .logo. В этих решениях предполагается, что на странице нет других элементов, которые наверняка изменят расположение этих элементов, особенно элементов без абсолютной позиции.

position: absolute; привязывает ваш элемент к экрану. В то время как position: relative; сохраняют исходную визуализированную позицию элемента и перемещают сам элемент относительно его исходной визуализированной позиции. Оба имеют радикально различное влияние на то, где ваши элементы отображаются на экране. Если вы хотите, чтобы оба элемента были точно в одном и том же месте, используйте абсолютное для обоих и используйте одинаковые свойства top и left.

Дело в том, что не полагайтесь на свойства CSS для определения точного местоположения ваших объектов. Если вам нужно поведение, подобное описанному в аналогии с Photoshop, вы можете найти способ, используя canvas.

...