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

所有决议的响应横幅图像

1 个答案: