时间戳

首页 > 解决方案 > 被切割的比例元素

html - 被切割的比例元素

问题描述

将 css 比例添加到 img 元素导致元素的左上角被剪切

css变换原点：0 0；可以解决这个问题，但这不是我想要的显示效果

<html>
    <head>scale element being cut</head>
    <style>
        .image-container {
            position: fixed;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            overflow: auto;
        }
        img {
            width: 100%;
            height: 100%;
        }
    </style>
    <body>
        <div class="image-container">
            <img id="image" src="https://avatars1.githubusercontent.com/u/9919?s=200&v=4" alt="">
        </div>
        <input type="button" onClick="scale()" value="scale image">
        <script>
            function scale () {
                document.getElementById('image').style.transform = 'scale(2)';
            }
        </script>
    </body>
</html>

我希望图像可以从中心转换，用户可以滚动查看缩放的图像

标签： htmlcss

解决方案

推荐阅读