Question

使用overflow：auto缩放居中图像时，即使图片超出了周围div的左边框，也无法向左滚动。

图像应居中并以相同方式左右移动。当包装纸达到尺寸时，将显示滚动条。

对此有什么解决办法吗？

<html>
<head>
    <title>Zoom</title>
    <style>
        body {
            background: #666666;
        }

        .content {
            background: #C3C3C3;
            width: 80%;
            height: 100%;
            margin: auto;
        }

        .img-wrapper {
            display: flex;
            justify-content: center;
            width: auto;
            overflow: auto;
            margin: 0 auto;
        }

        .my-image {
            height: 400px;
            transform-origin: top;
        }

        .slidecontainer {
            position: absolute;
            bottom: 50px;
            left: 47%;
            background: #0b1e2a;
        }

    </style>

</head>

<body>

<div class="content">
    <div class="img-wrapper">
        <img id="bacon" class="my-image"
             src="https://media.istockphoto.com/photos/cooked-bacon-rashers-closeup-isolated-on-a-white-background-picture-id508755080?s=2048x2048"/>
    </div>

    <div class="slidecontainer">
        <input type="range" min="0" max="100" value="0" class="slider" id="img-slider">
    </div>

</div>

<script type="text/javascript">
    function zoom(id, value) {
        var scale = "scale(" + value + ");"
        var style = "-ms-transform:" + scale + "-webkit-transform:" + scale + "transform:" + scale;
        document.getElementById(id).setAttribute("style", style);
    }


    var imgSlider = document.getElementById("img-slider");
    imgSlider.oninput = function () {
        multiplier = 3;
        var zoomlevel = 1 + this.value / 100 * multiplier;
        zoom("bacon", zoomlevel);
    }

</script>

</body>
</html>

Answer 1

请尝试更新代码

<html>

<head>
    <title>Zoom</title>
    <style>
        body {
            background: #666666;
        }

        .content {
            background: #C3C3C3;
            width: 80%;
            height: 100%;
            margin: auto;
        }

        .img-wrapper {
            display: flex;
            justify-content: center;
            width: auto;
            overflow: auto;
            margin: 0 auto;
            position: relative;
        }

        .my-image {
            height: 400px;
            transform-origin: top;
        }

        .slidecontainer {
            position: absolute;
            bottom: 50px;
            left: 47%;
            background: #0b1e2a;
        }
        </style>

</head>

<body>

    <div class="content">
        <div class="img-wrapper" id="img-wrapper">
            <img id="bacon" class="my-image" src="https://media.istockphoto.com/photos/cooked-bacon-rashers-closeup-isolated-on-a-white-background-picture-id508755080?s=2048x2048" />
        </div>

        <div class="slidecontainer">
            <input type="range" min="0" max="100" value="0" class="slider" id="img-slider">
        </div>

    </div>

    <script type="text/javascript">
        function zoom(id, value) {
            var outerDiv = document.getElementById('img-wrapper');
            var imgEle = document.getElementById(id);
            var scale = "scale(" + value + ");"
            var origin = "top";
            var translateX = '';
            if (outerDiv.clientWidth !== outerDiv.scrollWidth) {
                origin = "top left";
                translateX = ' translateX(' + (-imgEle.offsetLeft) + 'px) ';
            }

            var style = "-ms-transform:" + translateX + scale + "-webkit-transform:" + translateX + scale + "transform:" + translateX + scale + "transform-origin:" + origin + ";";
            document.getElementById(id).setAttribute("style", style);

            outerDiv.scrollTop = outerDiv.scrollHeight / 2 - outerDiv.clientHeight / 2;
            outerDiv.scrollLeft = outerDiv.scrollWidth / 2 - outerDiv.clientWidth / 2;
        }


        var imgSlider = document.getElementById("img-slider");
        imgSlider.oninput = function () {
            multiplier = 3;
            var zoomlevel = 1 + this.value / 100 * multiplier;
            zoom("bacon", zoomlevel);
        }
    </script>

</body>

</html>

CSS在缩放的图像上向左滚动

1 个答案: