CSS实现图片以中心缩放

最新推荐文章于 2025-05-08 11:20:32 发布

「已注销」

最新推荐文章于 2025-05-08 11:20:32 发布

阅读量4.3k

点赞数 3

分类专栏：前端文章标签： css3

本文链接：https://blog.youkuaiyun.com/qq_45794678/article/details/104228242

版权

前端专栏收录该内容

24 篇文章

订阅专栏

该博客介绍了如何使用CSS使图片以中心为基准进行缩放，并在超出容器时进行隐藏。具体应用包括在layui轮播图中实现此类效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS图片以中心缩放、放大，超出隐藏

layui轮播图

<!-- 轮播图 -->
<div class="layui-carousel wzg-carousel" id="test1">
	<div carousel-item>
		<div><img src="../res/images/1.jpg" alt=""></div>
		<div><img src="../res/images/2.jpg" alt=""></div>
		<div><img src="../res/images/3.jpg" alt=""></div>
		<div><img src="../res/images/4.jpg" alt=""></div>
		<div><img src="../res/images/5.jpg" alt=""></div>
		<div><img src="../res/images/6.jpg" alt=""></div>
	</div>
</div>

css

<style>
.wzg-carousel{
	width: 100%;
	overflow: hidden;O
	position: relative;
}
.wzg-carousel img{O
	width: 100%;
	top: 0;
	left: 0;
	position: relative;
	transition: transform 0.3s;
}
.wzg-carousel img:hover{
	transform: scale(1.1)
}
</style>