css 如何点击放大图片 |html和css教程 腾讯

/* HTML代码 */
<div class="box">
<img src="example.jpg" alt="example image">
</div>
/* CSS代码 */
.box {
position: relative;
width: 300px;
height: 200px;
}
.box img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.box:hover img {
transform: scale(1.5);
transition: transform 0.5s ease;
}

首先，大家要在HTML中添加一个包含图片的div，这个div的宽度和高度可以自己设定。然后在CSS中，大家将这个div的position属性设为relative，这样大家才能在里面创建绝对定位的图片。

在.box img样式中，大家将图片的width和height都设为100%，并使用object-fit:cover属性来保持图片长宽比例，使其填充满整个div。接着，大家使用box:hover img选择器，当鼠标悬停在div上时，将图片的transform属性设为scale(1.5)，即放大1.5倍。同时，大家还加上了transition属性来让放大效果更加平滑。

以上就是点击放大图片效果的制作方法。不过如果你想实现更加复杂的效果，比如点击弹出模态框等，需要用到JavaScript来实现。CSS和JavaScript的结合，可以让大家打造出更加炫酷的网页效果。