I'm using a Bootstrap grid to have 3 columns on large screens, two on smaller screens.
Inside the grid I'm displaying products. These products have two images that need to be overlaid. To accomplish this I'm using the standard pattern of a container with position: relative, and images inside it with position: absolute. The first (red) image is 500x666, while the second (blue) image is 640x320; I can't change the sizes of these images. The second image needs to be transformed: rotated, scaled and moved (translated) to a different position. The images in this example and the actual transformation applied are of course just examples to highlight the problem.
The code I have is as follows:
.tryonline {
position: relative;
height: 666px;
}
.tryonline img {
position: absolute;
max-width: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap grid image resizing problem</title>
</head>
<body>
<main>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">
<div class="tryonline">
<img class="red" src="https://i.imgur.com/HiB1H8P.png">
<img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500" style="transform: rotate(45deg) scale(0.5) translate(115px,148px)">
</div>
</div>
<div class="col">
<div class="tryonline">
<img class="red" src="https://i.imgur.com/HiB1H8P.png">
<img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500" style="transform: rotate(45deg) scale(0.5) translate(115px,148px)">
</div>
</div>
<div class="col">
<div class="tryonline">
<img class="red" src="https://i.imgur.com/HiB1H8P.png">
<img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500" style="transform: rotate(45deg) scale(0.5) translate(115px,148px)">
</div>
</div>
<div class="col">
<div class="tryonline">
<img class="red" src="https://i.imgur.com/HiB1H8P.png">
<img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500" style="transform: rotate(45deg) scale(0.5) translate(115px,148px)">
</div>
</div>
<div class="col">
<div class="tryonline">
<img class="red" src="https://i.imgur.com/HiB1H8P.png">
<img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500" style="transform: rotate(45deg) scale(0.5) translate(115px,148px)">
</div>
</div>
<div class="col">
<div class="tryonline">
<img class="red" src="https://i.imgur.com/HiB1H8P.png">
<img class="blue" src="https://i.imgur.com/ux5uNiL.png" width="500" style="transform: rotate(45deg) scale(0.5) translate(115px,148px)">
</div>
</div>
</div>
</div>
</main>
</body>
</html>I have two problems with this code:
- On smaller screens the blue rectangle moves -- it's no longer in the same position relative to the red image. I tried changing the order of the transforms but it didn't help.
- The
height: 666pxis hardcoded in the CSS, but because the images are scaled down on smaller screens that's not correct. I'm not sure if this is what's causing the first problem, and that if I could get the height to adjust automatically that the blue rectangle would stay in the same relative place.