CSS прокрутка влево на увеличенном изображении - PullRequest
Новая
       11

CSS прокрутка влево на увеличенном изображении

0 голосов
/ 12 октября 2018

При масштабировании центрированного изображения с переполнением: авто невозможно прокрутить влево, даже если изображение переполняет левую границу окружающего делителя.

Изображение должно быть центрировано и увеличено влевои точно так же.Когда размер оболочки будет достигнут, появятся полосы прокрутки.

Есть ли какое-нибудь решение для этого? 

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

1 Ответ

0 голосов
/ 12 октября 2018

Пожалуйста, попробуйте обновить код 

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