CSS实现图片放大缩小的几种方法

最新推荐文章于 2025-11-05 15:46:08 发布

原创最新推荐文章于 2025-11-05 15:46:08 发布 · 10w+ 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#css #图片缩放

CSS技巧专栏收录该内容

3 篇文章

订阅专栏

本文介绍了两种常见的图片缩放方法：一是通过HTML的img标签设置width或height属性使图片自动等比缩放；二是利用CSS3的transform属性scale方法实现图片放大与缩小。

常用使用img标签，制定width或者height的任意一个，图片会自动等比例缩小

<div>
    <img src="http://avatar.youkuaiyun.com/8/5/D/1_u012941315.jpg"/>
</div>
<!-- CSS-->
<style>
img {
    width: 100px;//重置大小，最终图片大小确定
}
</style>

使用CSS3新属性，transform的scale
- 大于1: 放大
- 小于1: 缩小

<style>
        img{
            transform:scale(2);//设置缩放比例
            -ms-transform:scale(2);
            -webkit-transform:scale(2);
            -o-transform:scale(2);
            -moz-transform:scale(2);
        }
</style>