转换比例会破坏滚动条？

Question

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:

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

After applying also the scaling CSS, scrollbars are ruined, ie 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?

 .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>

Answer 1

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

 .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.