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

Question

我有一个冗长的长图像（1280 x 498），我将把它作为背景放在div中。

我的div是一个Bootstrap jumbotron class 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;
}