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

Question

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

我的div是一个Bootstrapjumbotronclassdiv

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

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

Image inside div, displayd as is, without margin

css

background-image

responsive-design

twitter-bootstrap