全屏图像标题 - 响应设置

Question

我的主页上有一个全屏的精选图片标题，我正在努力做出回应。图像的宽度似乎在不同的屏幕尺寸上被切断

我已尝试过此高度和宽度设置，但希望图像本身能够调整大小和＃34;响应。

.hero-small {
    height: 886px!important;
    width: auto;
}

Website Link

Answer 1

这是你可以查找的有用的东西

1. width: 100%;
2. background-size:cover
3. background-size:contain
4. 或使用screen and (max-width: 500px) {}等媒体查询调整具有特定背景大小/位置的每个断点

希望这个帮助