按比例缩小大图像不会更新主体尺寸

Question

缩小图像时，正文不解释图像的 "new" 大小并显示滚动。这是 an example 和演示该问题的示例代码：

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

我的代码比您想象的要复杂得多，简单地隐藏滚动条或预定义正文的高度或宽度不是一种选择。我还需要用到transforms，不能定义图片的大小。

我怎样才能拥有一个解释图像新尺寸而不是更大尺寸的正文？

Answer 1

快速回答：正文（容器）不会使用图像的转换大小。为防止此容器元素大小反映原始图像大小，您可以定义尺寸或限制大小而不进行转换，或者使用绝对定位从文档流中删除该元素。

转换是应用于元素的可视化 'effect'，不会影响基础文档布局。基本上，浏览器会按变换前的原样绘制元素，然后应用变换效果。这允许转换后的元素覆盖其他元素，推到 window 之外等，而不影响其他元素布局。

更多 .

Answer 2

在 img 标签后使用一些 javascript 可以实现您想要的相同缩放比例：

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

只有高度需要缩放，宽度会按比例缩放。

按比例缩小大图像不会更新主体尺寸

Scale down big image doesn't update body size

html

css

css-transforms