Question

因此我尝试使用css转换创建可缩放的图像：容器div上的缩放和溢出。但是，当缩放放在图像上时，我无法向上或向左滚动。

我已经包含了我的测试代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

    <!-- CSS INCLUDES-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- JS INCLUDES -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- TITLE -->
    <title>test</title>

</head>

    <style>
        #zoom-wrapper {
            overflow: auto;
            height: 90vw;
            width: 90vw;
            border: 1px solid black;
            display:flex;
            justify-content:center;
            align-items:center;
        }

        .zoom {
            transform: scale(2);
            transition: transform ease .2s;
        }
    </style>

    <script>
        $(document).ready(function() {
            $('#zoom').click(function() {
                $(this).addClass('zoom')
            });
        });
    </script>

    <body id="gallery-wrapper" style="background-color: #efefef">
        <br><br>
        <div id="zoom-wrapper">
            <img id="zoom" class="img-responsive center-block" alt="zoom" src="https://i.ytimg.com/vi/7ecYoSvGO60/maxresdefault.jpg">
        </div>
    </body>

</html>

溢出和转换规模问题

0 个答案: