css 不使用@media 如何让你的banner图片按照屏幕大小自适应改变？

需求：需要在首页做一个banner图展示，在不同尺寸的屏幕上都能占满到可视区域的50%，并且保持图片不拉伸不变形

技术：传统的做法都是使用@media，根据不同尺寸，设置不同的高度，但我觉得这样很麻烦，所以更喜欢使用vh。

什么是vh/vw？vh/vw是一个视窗单位：1vh = 1% 视口高度，1vw = 1%视口宽度。顾名思义，如果设置图片高度50vh，它可以让你的图片高度一直保持在可视区域的50%。

上代码：

.banner img {
    width: 100%;
    height: 48vh; 
    object-fit: cover;
}

这里用到一个属性：object-fit: cover  它可以保证让你的图片不被拉伸、不变形，等比缩放。

效果：