全屏图像 header - 响应式设置

Full Screen Image header - Responsive Setting

我的主页上有一张全屏特色图片 header，我正在尝试使其响应。图片的宽度似乎在不同的屏幕尺寸上被截断了

我已经尝试过这种高度和宽度设置，但希望图像本身能够响应 "resize"。 

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

Website Link

这里有一些您可以查找的内容，对您有帮助

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

希望对您有所帮助