本程序实现图像悬停时缩放功能,即图像悬停时放大,但不会超出图片大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片缩放</title>
<style>
.container {
width: 50vw;
height: 50vh;
padding: 20px;
background-color: beige;
}
/* 缩放图片容器 */
.scalable-container {
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden !important; /* 图片放大溢出时隐藏 */
}
/* 缩放图片 */
.scalable-img {
width: 100%; /* 100%宽高,贴合缩放容器 */
height: 100%;
max-height: 100%; /* 最大高度,防止图片溢出 */
object-fit: cover !important; /* 图片超过容器时裁剪 */
transition: 0.3s; /* 过渡效果0.3s */
}
/* 缩放容器悬停时图片 */
.scalable-container:hover .scalable-img {
transform: scale(1.2); /* 放大1.2倍 */
}
</style>
</head>
<body>
<div class="container">
<div class="scalable-container">
<img src="https://t7.baidu.com/it/u=2259261418,2370578071&fm=193&f=GIF"
class="scalable-img" alt="图片" title="悬停时放大" />
</div>
</div>
</body>
</html>