Transformed image resizing strangely inside a Bootstrap grid

[colinthart]

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:

With 0.25x or full screen on the Code Pen site you can see how it should look; 0.5x and 1.x will show two problems:

1. 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.
2. The height: 666px is 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 then the blue rectangle would stay in the same relative place.

Has anyone encountered anything like this before and, hopefully, know how to fix the problem?

[PaulOB]

Hi,

This maybe wide of the mark without a real use case but I expect that what you want to do can only be done by using percentages and not using transform to scale the image.

Here’s a rough draft of what I think you wanted but that’s just a first guess

[colinthart]

@PaulOB

This maybe wide of the mark without a real use case but I expect that what you want to do can only be done by using percentages and not using transform to scale the image.

Here’s a rough draft of what I think you wanted but that’s just a first guess

Thanks! I’ll go to my actual code and see if that approach works!

[colinthart]

Yep. Works a treat.
Simple exchanging the CSS transform: scale, and translate for width, and top and left respectively did the trick, with no other CSS changes needed in our actual code. I had to change my maths somewhat, and I found an error there too, though nothing that would’ve solved my problem.
Many thanks, @PaulOB.

[lara]

I’m not @PaulOB, but I’m sure he would appreciate your thanks and feedback. He seems to be a very knowledgeable and helpful person who has a lot of experience with web development and design. I am sure we will learn a lot through each other by participating the way we are up to.