众所周知,CSS 有许多不同的单位,用来表示长度、宽度、高度、字体大小等属性。
其中,有一种单位可能不太为人所知,但却非常实用,那就是 vmin 和 vmax。
大家好,我是渡一前端子辰老师,今天我们以图片的自适应缩放这个效果为例,来看一下vmin和vmax这两个单位,在前端开发实战当中的应用。
自适应缩放
我们来看一个使用的效果。
可以看到图片是居中的,仔细观察这个图片的尺寸,你就会发现它有个特点,图片的宽高始终保持的是这个视口中最小的那条边。
这个放在过去也是能做的,就是比较麻烦,说不好还得用 JS。
但现在非常简单了,你直接通过一个 CSS3 单位来实现,叫做 vmin。
这个 vmin 的意思表示取视口宽度( vw )和视口高度( vh )较小的值。
img {
width: 100vmin;
height: 100vmin;
}
所以我们图片像上面这样设置就是实现了开头的效果。
那么既然有 vmin 那肯定有 vmax。
vmax 的意思表示取视口宽度( vw )和视口高度( vh )较大的值。
可以看到图片是填满了整个视口,但是可能会有部分内容被裁剪掉。
我们利用这两个单位就可以实现全屏的图片预览,特别是针对手机端的横屏竖屏的时候,相当有用。
总结
本文介绍了一种非常简单,但是特别实用的 CSS 单位:vmin 和 vmax。
它们可以表示视口宽度和高度中较小或较大的值,从而实现图片的自适应缩放。
并通过简单的例子,展示了它们如何实现图片的居中显示和完整显示或填充显示。
这两种单位在移动端网页设计中非常方便,可以根据不同设备和方向来调整图片的大小。
本文来源
本文来源自渡一官方公众号:Duing,欢迎关注,获取最新、最全、最深入的技术讲解
感谢你阅读本文,如果你有任何疑问或建议,请在评论区留言,如果你觉得这篇文章有用,请点赞收藏或分享给你的朋友!
© 版权声明
文章版权归作者所有,未经允许请勿转载,侵权请联系 admin@trc20.tw 删除。
THE END