Search code examples
mobileresponsivescaling

Scaling all content in a div as if one element

I have two images placed on top of each other in a div with a caption underneath. I would like all of these elements to scale proportionally and together as the browser window shrinks.

Currently, the position of the two images shifts and does not look the same on mobile.

.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>
The best analogy for the product I'm trying to receive is grouping multiple layers in Photoshop which allows you to scale all the layers together as if it was one single image. I am new to HTML/CSS, so I hope this makes sense and is not asked too often. Thanks for your help.

Solution

  • The position of the logo relative to the image under it will definitely shift. One of the reason for this is that you use vh unit for some properties, including the padding-top of the .highlightimg. 10vh in desktop and in mobile is different (they both have different viewport sizes). If you want both elements to stay the same, anchor both of them to the left and top by setting at least constant padding-top, margin-top, or the top properties (including the left padding and margin).

    Maybe adding top: 18vh; to .logo could help. Using top: 10vh; instead of 18vh while also removing margin-top: 8vh from .showcase could also help. This is to ensure the top offset of the .highlightimg provided by its padding-top property scales proportionally with the top offset of the .logo. These solutions assume that there are no other elements in the page that will surely alter the location of these elements especially the ones without absolute position.

    position: absolute; anchors your element to the screen. While position: relative; keep the element original rendered position and move the element itself relative to its original rendered position. Both have radically different impacts on where your elements get rendered on the screen. If you want both element to be exactly at the same location, use absolute for both and use same top and left properties.

    Point is, don't rely on CSS properties to determine the exact location of your objects. If you want behavior like the one you describe in your Photoshop analogy you could find a way by using canvas.