使 jumbotron 背景图像和文本响应[关闭]答案

【问题标题】：Make jumbotron background-image and text responsive [closed]使 jumbotron 背景图像和文本响应[关闭]
【发布时间】：2015-11-26 21:57:50
【问题描述】：

我有一个jumbotron，可以将其横幅图像调整到整个屏幕。

当我尝试在图片上放置文字时，文字不会显示在手机屏幕上，因为图片适合手机屏幕（高度越来越小）。

如何调整图片和文字以适应任何屏幕？

.widewrapper {
  width: 100%;
}
.widewrapper > img {
  width: 100%;
}
.post-content {
  background: none repeat scroll 0 0;
  opacity: 0.5;
  top: 0;
  left: 0;
  position: absolute;
}
.thumbnail {
  position: relative;
}

<!-- Bootstrap CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<!-- Original code -->
<div class="widewrapper thumbnail">
  <img class="" src="http://orig10.deviantart.net/f6bf/f/2007/054/1/9/website_banner_landscape_by_kandiart.jpg" alt="">
  <div class="post-content">
    <h2 class="text-white">ABOUT</h2>
    <h3 class="text-white">We invite you to enjoy a luxurious ground transportation service provided by our team of experts. We have the experience and skills to meet the expectations of every passenger and add value to every ride.</h3>
  </div>
</div>

【问题讨论】：

标签： html css image twitter-bootstrap

【解决方案1】：

您可以手动添加media queries，根据视口大小调整字体大小。它运行良好，但很耗时。

以下示例（您需要根据需要调整值）：

@media(max-width: 1580px) {
post-content {
font-size: 18px;
}

@media(max-width: 980px) {
post-content {
font-size: 16px;
}

@media(max-width: 700px) {
post-content {
font-size: 14px;
}

有些工具也可以为你自动完成这项工作，我使用this one，但还有很多其他工具。

【讨论】：

【解决方案2】：

从您的 HTML 中删除图像并将其设置为 CSS 中的背景。

你可以使用：

background-image: url('');
background-size: cover;

body, h2, h3 {
  margin: 0px;
  font-family: Helvetica, Arial;
}

#background-wrapper {
  background-image: url('http://orig10.deviantart.net/f6bf/f/2007/054/1/9/website_banner_landscape_by_kandiart.jpg');
  background-size: cover;
  color: white;
  text-align: center;
}

<div id="background-wrapper">
  <h2>About:</h2>
  <h3>We invite you to enjoy a luxurious ground transportation service provided by our team of experts. We have the experience and skills to meet the expectations of every passenger and add value to every ride.</h3>
</div>

【讨论】：

【解决方案3】：

这样做的一种方法是使用viewport-relative units 作为您的字体大小。

1 vw单位等于1%的初始宽度包含块。

例如：

.widewrapper { width: 100%; }
.widewrapper > img { width: 100%; }
.post-content {
  position: absolute; top: 0; left: 0;
  background: none repeat scroll 0 0;
  opacity: 0.7;
}
.thumbnail { position: relative; }
h2, h3 { color: #fff !important; margin: 8px; }
h3 { font-size: 2.3vw !important; color: #fff !important; }

<!-- Bootstrap CDN -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="widewrapper thumbnail">
  <img class="" src="http://orig10.deviantart.net/f6bf/f/2007/054/1/9/website_banner_landscape_by_kandiart.jpg" alt="">
  <div class="post-content">
    <h2 class="text-white">ABOUT</h2>
    <h3 class="text-white">We invite you to enjoy a luxurious ground transportation service provided by our team of experts. We have the experience and skills to meet the expectations of every passenger and add value to every ride.</h3>
  </div>
</div>

【讨论】：