Scale down big image doesn't update body size

Question

When scaling down an image, the body doesn't interpret the "new" size of the image and displays the scroll. Here is an example and a sample code that demonstrates the issue:

<body>
   <img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Willaerts_Adam_The_Embarkation_of_the_Elector_Palantine_Oil_Canvas-huge.jpg" style='transform-origin:top left;transform:scale(0.05)' />
</body>

My code is much more complex as you can imagine and simply hiding the scroll or pre-defining the height or width of the body is not an option. I also need to use transforms and can't define the size of the image.

How can I have a body that interprets the new size of the image instead of the bigger size?

t-jam · Accepted Answer · 2018-01-22T22:37:42.583

2

Quick answer: the body (container) won't use the transformed size of the image. To prevent this container element size reflecting the original image size, either you define dimensions or restrict size without transforms, or you remove the element from the document flow with absolute positioning.

Transforms are a visual 'effect' applied to an element, and don't affect the underlying document layout. Basically the browser draws elements as they are before transforms, then applies the transform effect. This allows transformed elements to overlay other elements, push outside the window etc. without affecting other element layout.

More detail in this SO question.

edited Jan 22 '18 at 22:37

answered Jan 22 '18 at 22:21

t-jam

811
1
6
21

Is there a way I can "tell" the body to ignore the image only and not the other containers? – Nate Jan 22 '18 at 22:26
@ncohen Yes, but you need to pull the image out of the document flow, e.g. with absolute positioning. However at some point you'll need to define some kind of image / container element dimensions to prevent element overlaps etc., unless that's your desire. – t-jam Jan 22 '18 at 22:31

score 0 · Answer 2 · answered Jan 22 '18 at 23:50

The same scaling you want can be achieved with some javascript after the img tag:

<body>
    <img id="theImg" src="https://upload.wikimedia.org/wikipedia/commons/2/24/Willaerts_Adam_The_Embarkation_of_the_Elector_Palantine_Oil_Canvas-huge.jpg" style='transform-origin:top left;' />
    <script>
        document.getElementById("theImg").style.height = document.getElementById("theImg").clientHeight *0.05;
    </script>
</body>

Only the height needs to be scaled and the width will scale itself proportionally.

Scale down big image doesn't update body size

2 Answers2