适用于所有分辨率的响应式横幅图像

Question

我正在尝试制作一个横幅图像，跨越屏幕的 100% 宽度我想要实现的示例可以在此处找到：

http://www.aha.io/roadmapping/where-aha-fits

全屏查看。横幅的宽度为 100%，可能为屏幕高度的 15%。

当您缩小窗口尺寸时，横幅仍然使用 100% 的屏幕宽度，但我认为似乎裁剪了左侧尺寸，并降低了高度，将屏幕高度保持在 15% 左右。

我在这里创建了一个我想要做的演示：

http://www.bootply.com/Hrxwy8BjTT

我最终得到的是，在“移动”版本中，一个非常非常薄的横幅。

我怎样才能让它稍微裁剪一下，并保持屏幕高度的 10% 左右（在我的例子中）（并且不创建滚动条）？

Answer 1

这将是使用媒体查询的一个好例子。下面的代码针对移动优先模式中的特定宽度。这样#background 的样式取决于设备的宽度。

#background {
  background: url(http://snowdebts.com/images/banner-thin.png);
  background-position: center;
  background-size: cover;
  height: 225px; width: 100%;
}

@media (min-width: 480px) {
    #background { height: 200px; }
}

@media (min-width: 768px) {
    #background { height: 150px; }
}

@media (min-width: 992px) {
    #background { height: 100px; }
}

我冒昧地删除了你的图像标签，并将其设置在 CSS 中。因此，对于 HTML，您需要以下内容：

 <div class="tab-content">
   <div id="background">

   </div>
   <div style="padding-left: 20px;">
     Hello
   </div>
</div>

您可以根据需要将高度修改为百分比或固定宽度。另外，由于我们已将图像设置为 div 元素的背景，因此我们无需担心滚动条，只需担心 div 的大小即可。