css实现图片自适应缩放的两种方法

柴钰琪

已于 2024-07-13 11:11:19 修改

阅读量7.8k

点赞数 5

分类专栏：前端笔记

于 2021-07-03 15:28:25 首次发布

本文链接：https://blog.csdn.net/qq_35582562/article/details/118439334

版权

图片适配 object-fit:cover 填充策略宽高调整视觉效果

关键词由CSDN通过智能技术生成

前端笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了两种CSS实现图片自适应缩放的方法，通过设置img标签宽高比例，讨论了它们的显示效果和适用场景。第一种方案利用裁剪展示更多内容，但可能在旋转时产生问题；第二种方案在动画效果上表现更优，但可能在宽高差距大时显示不足。

摘要由CSDN通过智能技术生成

想要实现图片根据给定宽高来自适应缩放的时候，会想到什么属性？是object-fit: cover;吗？
来试一试！为了展示效果，我特地选了对称的图片。下面两个img元素都有一个div包裹，div设置固定宽高，第一个img标签宽高均100%，第二个img标签宽高均最小100%：

<!DOCTYPE html>
<html>
<head>
	<title></title>
    <meta name="referrer" content="never">
    <style type="text/css">
    	*{margin: 0;padding: 0;border: none;overflow: hidden;}
        .img1,.img {
            width: 600px;
            height: 320px;
            margin: auto;
        }
        .img1 img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .4s
        }
        .img1 img:hover{width: 125%;height: 125%;margin-left: -12.5%;margin-top: -12.5%;transform: rotate(-12deg);}

        .img{position: relative;overflow: hidden;;}
        .img img{
            position: relative;
            top: 50%;
            left: 50%;
            display: block;
            min-width: 100%;
            min-height: 100%;
            transform: translate(-50%,-50%);
            border-radius: 4px;
            transition: .4s
        }
        .img img:hover{min-width: 125%;min-height: 125%;transform: translate(-50%,-50%) rotate(-12deg);}
    </style>
</head>
<body>
	<div class="img1">
        <img style="" src="https://img-blog.csdnimg.cn/20210703140200283.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTgyNTYy,size_16,color_FFFFFF,t_70#pic_center">
    </div>
    <br>

    <div class="img">
        <img style="" src="https://img-blog.csdnimg.cn/20210703140200283.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NTgyNTYy,size_16,color_FFFFFF,t_70#pic_center">
    </div>
</div>
</body>
</html>

在这里插入图片描述
确实!object-fit: cover;工作良好。那有没有其他方式？看第二个img标签的样式！

从最终效果来看，第一种方案展示的内容更多！因为object-fit: cover;的裁剪是按照img标签宽高值中较大的值为基准的，将图片从中心按宽或高缩放至最大值后，再裁去多余部分后展示。

在第二种方案中，img标签的宽高就是图片的宽高。通过位移和坐标变换使其居中。这个方案有个弊端，就是图片实际宽高和我们想要展示的宽高差距过大时，展示的内容会非常少，只有中间一点点，而且hover缩放效果也没有了。~~所以应该使用第一种方案。~~

后续：在实际使用中，第二种方案体验明显更好。第一种在旋转变换的时候出现空白区域，且有抖动。第二种方案没有这个问题。如果只是缩放展示，第一种方案是首选；如果需要动画效果，第二种方案更加合适。

柴钰琪

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
css实现图片自适应缩放的两种方法

想要实现图片根据给定宽高来自适应缩放的时候，会想到什么属性？是object-fit: cover;吗？来试一试！为了展示效果，我特地选了对称的图片。下面两个img元素都有一个div包裹，div设置固定宽高，第一个img标签宽高均100%，第二个img标签宽高均最小100%：<!DOCTYPE html><html><head> <title></title> <meta name="referrer" content="ne
复制链接

扫一扫

专栏目录