html - 我怎样才能制作背景图片 scalebale

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; 
}