css - 我可以得到转换 : scale() to cause overflow-scroll?

Question

对于移动设备，我将图片缩放到完整尺寸。我正在使用变换比例来执行此操作，因为它会产生最佳帧速率。

transition: transform 1s;
transform: translateY(0px) scale(2.43038);

(比例是用javascript计算的)

想法是允许用户在常规视口(viewport)中滚动和缩放，但是当图像缩放比例大于屏幕时，不添加滚动。我能否以某种方式使文档宽度随图像一起扩展？

Answer 1

一个解决方法是将图像包装在一个定义为滚动的 overflow 元素中，这样父元素就会滚动。

body,html {
  height: 100%;
  }
div {
  overflow: auto;
  height: 100%;
}
img {
  transform: scale(20);
}

<div><img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg"></div>