div内的图像，按原样显示，无边距

Question

我有一张很长的图片 (1280 x 498)，我将把它放在一个 div 中作为背景。

我的 div 是 Bootstrap jumbotron 类 div

<div class="jumbotron text-center">

将图像设置为background-image 使其具有响应性并位于表单后面，就像我想要的那样。

问题： 图像的高度小于 498，因此看起来被裁剪了。我必须设置额外的填充和边距，但这会给页面添加不必要的滚动。 我添加了padding-bottom: 4%;，它将在某些屏幕尺寸下添加额外的滚动。

另外，如果页面真的很小，图像是响应式的，但它的高度小于表单，使整个设计难看。我想我可以使用媒体查询来增加小屏幕中的边距和填充，但这会使图像在 y 轴上重复。

有什么想法吗？

谢谢

---

我现在的代码

<div id="scott" class="jumbotron text-center">


#scott{
    background-image: url("../images/scott.jpg");
    background-size: 100%;
    padding-bottom: 4%;
    margin-bottom: 4%;

}


@media (max-width: 400px) {
      #scott {
        padding-bottom: 8%;
        margin-bottom: 8%;
      }      
}

---

---

Answer 1

试试这个

    #scott{
    background-image: url("../images/scott.jpg");
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;;

}

Answer 2

对于您想要的背景的基本操作，不需要媒体。使用媒体来缩放表单框以适应移动设备。

您可以尝试以下样式来实现您正在寻找的内容：

#scott {
    background: no-repeat url("background.jpg") center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;        
    background-size: cover;
}