Question

任何人都知道如何在点击时上下调整图片大小。示例：nrk.no

Answer 1

您提供的网站作为示例使用CSS Transitions来使他们的一些图像增长和缩小。您可以在https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

了解有关CSS过渡的更多信息

下面是一个使用JQuery的简单示例。当您点击Google徽标时，它会增长，当您再次点击它时，它会缩小。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
    .box img {
        transition: width .4s,margin .4s,max-width .4s;
        transition-property: width, margin, max-width;
        transition-duration: 0.4s, 0.4s, 0.4s;
        transition-timing-function: ease, ease, ease;
        transition-delay: 0s, 0s, 0s;
    }
    .box img.clicked{
        width: 500px;
     }
    </style>

    <script>
    $(function(){
        $('.box img').on('click', function() {
            $(this).toggleClass('clicked');
        });
    });
    </script>
</head>
<body>
    <div class="box">
        <img src="https://www.google.com/images/srpr/logo11w.png" width="100" />
    </div>
</body>
</html>

如何调整响应式图像的大小

1 个答案: