Transformed image resizing strangely inside a Bootstrap grid

Question

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/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/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:

The height: 666px is hardcoded in the CSS, but because the images are scaled down on smaller screens that's not correct.
On smaller screens the blue rectangle moves -- it's no longer in the same position relative to the red image. It could be I need to change the origin of the transformation but I haven't been able to look into this yet.

Transformed image resizing strangely inside a Bootstrap grid

0 Answers0