Css 缩小大图像不会更新身体大小_Css_Html_Css Transforms

Css 缩小大图像不会更新身体大小

css html

Css 缩小大图像不会更新身体大小,css,html,css-transforms,Css,Html,Css Transforms,缩小图像时，主体不会解释图像的新大小，而是显示滚动条。下面是一个示例代码，演示了该问题： <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:scal

缩小图像时，主体不会解释图像的新大小，而是显示滚动条。下面是一个示例代码，演示了该问题：

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

我的代码比你想象的要复杂得多，简单地隐藏卷轴或预先定义主体的高度或宽度是不可取的。我还需要使用变换，无法定义图像的大小

我怎样才能让一个主体解释图像的新大小而不是更大的大小？

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

转换是应用于元素的视觉“效果”，不会影响底层文档布局。基本上，浏览器按照变换前的状态绘制元素，然后应用变换效果。这允许转换后的元素覆盖其他元素，将其推到窗口外等，而不会影响其他元素的布局

更多信息。

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

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

有没有办法让主体只忽略图像而不忽略其他容器？@n如果有，但您需要将图像从文档流中拉出，例如使用绝对定位。但是，在某些时候，您需要定义某种类型的图像/容器元素维度，以防止元素重叠等，除非您希望这样做。