CSS实现图片以中心缩放 --- 20/03/18

最新推荐文章于 2024-04-11 15:13:38 发布

AkuHime

最新推荐文章于 2024-04-11 15:13:38 发布

阅读量7.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： CSS IMG缩放 IMG放大

本文链接：https://blog.youkuaiyun.com/HimeYui/article/details/89242402

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用CSS实现图片以中心为基准进行缩放，并在图片大小超过容器时隐藏超出的部分。提供了HTML和CSS代码示例。

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

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

HTML代码：

<div class="container">
	<img src="../xxx.png" alt="">
</div>

CSS代码：

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