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

时间:2019-06-08 07:51:43

标签: responsive banner

我正在使用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>

1 个答案:

答案 0 :(得分:0)

如果要填充整个页面,请使用object-fit:fill。参见object-fit documentation