Transforming scale ruins the scrollbars?

userEn46 0
Viewed 20

In CSS, we can do a nice scale effect on images, without hassling too much with their width and height attribute:

transform: scale(2);

To reach a common goal, it's better to adjust the origin too:

transform-origin: center;

This way the image will be scaled while keeping its origin at the center, so it will be more natural to the human eye.

However, if we put this image (and why shouldn't we do) into a wrapper, this seems ruining the scrollbars.

Consider this image:

enter image description here

This is a fairly big image, and I put it into a fixed sized wrapper.

After applying also the scaling CSS, scrollbars are ruined, i.e. I can't move upwards nor left, so the left and top parts of the image are cut, while we can move downwards and right without issues.

Here is the very simple JSFiddle: http://jsfiddle.net/thyzog8u/

Can I somehow easily overcome on this limitation of using scale with CSS?

enter image description here

.image_wrap {
   width:400px;
   height:200px;
   overflow:auto;
}
.image_wrap img {
    transform: scale(2);
    transform-origin: center;
}
<div class="image_wrap">
    <img src="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_1.jpg" alt="" />
</div>

css-transforms css
1 Answers

scale and transform in general doesn't affect the layout flow. You have to use width and height + Scrolling with JavaScript for this:

window.addEventListener('load', () => {
  let scrollElement = document.querySelector('.image_wrap');
  scrollElement.scrollLeft =  (scrollElement.scrollWidth -    scrollElement.clientWidth ) / 2;
  scrollElement.scrollTop =  (scrollElement.scrollHeight -    scrollElement.clientHeight ) / 2;
});
.image_wrap {
   width:400px;
   height:200px;
   overflow:auto;
}
.image_wrap img {
    width: 1360px; /* 680 (image width) * 2 */
    height: 640px; /* 320 (image height) * 2 */
}
<div class="image_wrap">
    <img src="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/images/img_1.jpg" alt="" />
</div>
You can also use JavaScript to get a dynamic image size.

Credit for scrolling half way: https://stackoverflow.com/a/64264419/9977151

ATP0
Related