自适应缩放

我们来看一个使用的效果。

可以看到图片是居中的，仔细观察这个图片的尺寸，你就会发现它有个特点，图片的宽高始终保持的是这个视口中最小的那条边。

这个放在过去也是能做的，就是比较麻烦，说不好还得用 JS。

但现在非常简单了，你直接通过一个 CSS3 单位来实现，叫做 vmin。

这个 vmin 的意思表示取视口宽度( vw )和视口高度( vh )较小的值。

img {
  width: 100vmin;
  height: 100vmin;
}

所以我们图片像上面这样设置就是实现了开头的效果。

那么既然有 vmin 那肯定有 vmax。

vmax 的意思表示取视口宽度( vw )和视口高度( vh )较大的值。

可以看到图片是填满了整个视口，但是可能会有部分内容被裁剪掉。

我们利用这两个单位就可以实现全屏的图片预览，特别是针对手机端的横屏竖屏的时候，相当有用。

总结

本文介绍了一种非常简单，但是特别实用的 CSS 单位：vmin 和 vmax。

它们可以表示视口宽度和高度中较小或较大的值，从而实现图片的自适应缩放。

并通过简单的例子，展示了它们如何实现图片的居中显示和完整显示或填充显示。

这两种单位在移动端网页设计中非常方便，可以根据不同设备和方向来调整图片的大小。

本文来源自渡一公众号:Duing，欢迎关注，获取超新、超深入的技术讲解

感谢你阅读本文，如果你有任何疑问或建议，请在评论区留言，如果你觉得这篇文章有用，请点赞收藏或分享给你的朋友！