要使背景/英雄视频能够自适应大小,可以使用CSS中的object-fit属性和object-position属性。
例如,对于一个铺满页面的英雄视频:
HTML:
CSS:
.hero-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
其中,object-fit属性的值可以是cover、contain、fill、scale-down,用于控制视频的适应方式;object-position属性的值可以是top、bottom、center、left、right,用于控制视频的位置。
通过设置这些属性,可以使背景/英雄视频在任何尺寸的屏幕上适应布局。