需要帮助在视口内缩放图像

Question

>我有一个显示图像的 Django 站点，我需要使用按钮放大和缩小，同时保持视口相对相同的大小，并在放大时使用滚动条移动图像。我不是CSS或javascript的人，所以这个尝试是基于很多谷歌帮助。

$(document).ready(function() {
console.log("Zoom START");
$('#zoom-in').click(function() {
updateZoom(0.1);
console.log("Zoomed in");
});
$('#zoom-out').click(function() {
updateZoom(-0.1);
console.log("Zoomed out");
});
zoomLevel = 1;
var updateZoom = function(zoom) {
zoomLevel += zoom;
$('#imageblock').css({
zoom: zoomLevel,
'-moz-transform': 'scale(' + zoomLevel + ')',
/* Firefox */
'transform': 'scale(' + zoomLevel + ')',
//'-ms-transform': 'scale(' + zoomLevel + ')', /* IE 9 */
'-webkit-transform': 'scale(' + zoomLevel + ')',
/* Safari and Chrome */
//'-o-transform': 'scale(' + zoomLevel + ')', /* Opera */
});
console.log("updated imageblock css");
}
});

#imageblock {
max-height: 600px;
max-width: 800px;
transform-origin: top left;
overflow: hidden;
}
#imageblock img {
width: 100%;
height: 100%;
object-fit: contain;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Image:</label>
<div class="readonly">
<div>
<b>Click to tag people, Ctrl-click to tag animals</b>
<button type="button" id="zoom-in">zoom in</button> <button type="button" id="zoom-out">zoom out</button>
</div>
<div id="imageblock">
<img src="https://i.imgur.com/v38pV.jpg" id="img1" doc_id="394" style="height:600px" />
</div>
<div>
<a id="rotate" href="#">Rotate 90 degrees</a>
</div>
</div>

图像会缩放，但也会增长以填充页面，没有任何滚动条，并且不会停留在视口(图像块(内。感谢您给我的任何帮助/指导！

马克

Answer 1

您可能希望使用这样的方法，其中包含几个边界元素来控制剪切和滚动。见下文：

$('input').on('change', function() {
$('img').css('transform', `scale(${$(this).val()})`);
});

div {
width: 300px;
height: 300px;
border: 1px solid #000000;
overflow: scroll;
display: block;
}
img {
transform-origin: 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" step="0.1" value="1" min="0" />
<div>
<img src="http://placekitten.com/g/250/250" />
</div>

Answer 2

尝试给父div溢出：隐藏

readonly{
overflow: hidden
}