Question

缩小图像时，身体不会解释＆＃34;新的＆＃34;图像的大小并显示滚动。以下是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>

我的代码要复杂得多，你可以想象并简单地隐藏滚动或预定义身体的高度或宽度不是一种选择。我还需要使用变换，并且无法定义图像的大小。

如何设置一个可以解释图像新尺寸而不是更大尺寸的主体？

Answer 1

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

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

更多detail in this SO question。

Answer 2

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

var newData = angular.module('newData',[]);

newData.controller('DataController', function() {
    //would like to access form here
})

newData.directive('myForm', function() {
   return {
    scope: {
        dataObj: '='
    }
    templateUrl: 'myForm.html'
    link: function(scope, element, attrs) {

    }
   };

})

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

缩小大图像不会更新体型

2 个答案: