我怎样才能使一个背景图像scalebale

我有一面旗帜div：我怎样才能使一个背景图像scalebale

<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被裁剪，这里是截图。全宽：

与已缩放窗口：

有没有什么办法，使图像可调整大小的时候，屏幕宽度变窄？谢谢。

来源

2017-04-03 Alex Zakruzhetskyi

尝试background-size: 100% auto;

来源

2017-04-03 12:31:46

不幸的是，它不适合我的工作。 –

这里是示例https://jsfiddle.net/tL5rv4e2/ –

注意：使用background-image属性的内联css而不是背景 –

只需使用background-size: contain这个

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

来源

2017-04-03 12:37:09

我怎样才能使一个背景图像scalebale

回答

相关问题