如何制作背景图像缩放比例

Question

我有一个横幅div：

<div class="background" style="background: url(<%= @banner.image.url(:big) %>) no-repeat"></div>

和相应的css：

#banner {
  width: 100%;
  height: 275px;
}

#banner .background {
  width: 100%;
  height: 275px;
  background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
}

uploader.rb：

version :big do
  process resize_to_fill: [1920, 280]
end

在较小的设备上，background-image被裁剪，以下是截图。全宽：

调整大小的窗口：

当屏幕宽度变窄时，有没有办法让图像可以调整大小？感谢。

Answer 1

只需使用background-size: contain即可

#banner .background {
    background-size: contain; 
}

Answer 2

尝试background-size: 100% auto;