Question

我试图理解为什么，当我使用缩放时，它会切掉照片的前三分之一，如果居中，或左对齐，左上边缘。我认为它与img的中点发生的缩放有关。我使用的代码似乎微不足道除了按钮之外没有其他内容。导致这种情况的原因以及如何正确地进行操作以使整个照片显示在div中？

预期的结果是当您按下＆＃34; +＆＃34;按钮，缩放的照片将保留在原始大小的div中，允许用户滚动放大的照片。

<head>
<title>Zoom photo</title>
<style>
.largeimage img { transform:scale(2); }
</style>
<script>
function explody() {
    document.getElementById("photocontainer").classList.add('largeimage');
}
</script>
</head>
<body >
<div style="overflow:auto;transform-origin: top left;text-align:center;" id="photocontainer" >
<img src="Desktop/graphic/Oliver1950/IMG_0435.jpg">
</div>
<input type="button" onClick="explody();" value="+">
</body>
</html>

Answer 1

这是因为比例的起源发生在图像的中心（水平和垂直中心）。如果它位于靠近页面顶部的<div>，它将被切断。如果它位于设置为隐藏溢出的<div>中，它也将被切断。

诀窍是在包裹<div>周围留出空间以适应图像的扩展尺寸，或者只是改变transform-origin属性。

div {
  text-align: center;
}

div:hover {
  transform: scale(2);
  transform-origin: top center;
}

<div>
  <img src="http://via.placeholder.com/350x150">
</div>

css3变换比例缩小图像的前三分之一

1 个答案: