具有 div 背景的响应式设计问题答案

【问题标题】：Responsive design issue with div background具有 div 背景的响应式设计问题
【发布时间】：2014-03-18 19:18:00
【问题描述】：

为什么背景在这里突出？

.splash {
    width: 100%;
    height: 576px;
    background: url('/static/img/cover.jpg') no-repeat top center;
    background-size: cover;
    color: #fff;
}

【问题讨论】：

您已将width 指定为100%。所以background-image 占据了整个空间。
如果 .splash 和菜单具有相同的父级，请确保将父级的大小更改为您想要的，但您可以 100% 的菜单宽度。
如果您提供大部分代码或 jfiddle 会很好。

标签： html css twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案1】：

您设置了width: 100%;，这意味着它显示背景的全尺寸。

您可以指定所需的确切宽度。并设置：

max-width: 1000px; //example to set maximum width;

所以：

.splash {
    width: 100%;
    height: 576px;
    max-width: 2000px; //here goes your size
    background: url('/static/img/cover.jpg') no-repeat top center;
    background-size: cover;
    color: #fff;
}

【讨论】：

如果我想适应设备怎么办？

【解决方案2】：

.splash img{
width: 100%;
height: 576px;
background-size: cover;
color: #fff;
}

【讨论】：

【解决方案3】：

如果您希望它适应设备，请将其添加到您的 <head> 标签中：

<meta name="viewport" content="width=device-width">

然后将其添加到您的 <head> 标签中：

<style>
img {
    max-width: 100%;
}
</style>

然后在你的 CSS 中，你将 .splash 的宽度设置为 100%，它应该填满任何设备上的页面。

【讨论】：