html - 适用于所有分辨率的响应式横幅图片

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 的大小。