html图片放大缩小代码

作者：√学卟会掩饰发布日期:2025-06-15 浏览:106

<!DOCTYPE html>
<html>
<head>
    <title>图片放大缩小示例</title>
    <style>
        /* 设置图片容器的样式 */
        .image-container {
            width: 300px;
            height: 300px;
            overflow: hidden;
            margin: 20px auto;
            text-align: center;
        }

        /* 设置图片的初始样式 */
        .image-container img {
            max-width: 100%;
            transition: transform 0.5s ease;
        }

        /* 鼠标悬停时放大图片 */
        .image-container:hover img {
            transform: scale(1.5);
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="your-image-url.jpg" alt="示例图片">
    </div>
</body>
</html>

解释说明：

HTML结构：
- div 元素带有类名 image-container，用于包含图片。
- img 标签用于显示图片，并通过 src 属性指定图片的 URL。
CSS样式：
- .image-container：设置图片容器的宽度和高度为 300x300 像素，并使用 overflow: hidden 来确保图片在放大的时候不会超出容器范围。
- .image-container img：设置图片的最大宽度为容器的 100%，并添加 transition 属性使图片在放大时有平滑的过渡效果。
- .image-container:hover img：当鼠标悬停在图片容器上时，通过 transform: scale(1.5) 将图片放大 1.5 倍。

你可以根据需要调整容器的大小、缩放比例以及过渡时间等参数。

上一篇：html页面随窗口大小改变

下一篇：html5 播放器