responsive - 使用对象适合封面的响应式整页横幅

Question

我正在使用 object-fit:cover。但它裁剪了我的图像。我希望我的图像在所有分辨率上都显示相同而无需裁剪。目前它被从侧面切割。我希望它显示为整页而不进行任何裁剪。

body,html{ height:100%;}

#home{ height:100vh;}
#home img{ height:100vh; width:100%; object-fit:cover;}

<div id="home">
 <img src="https://i.stack.imgur.com/EHmdc.png" class="img-fluid">
</div>

标签： responsivebanner

Answer 1

如果您希望它填满整个页面，请使用object-fit:fill. 请参阅对象拟合文档