使jumbotron背景图像和文字响应

Question

我有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>

Answer 1

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

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

@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;
}

有些工具也可以自动为您执行此操作，我使用media queries但还有很多其他工具。

Answer 2

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

您可以使用：

public class MyButton : Button
{
    protected override void OnMouseUp(MouseEventArgs mevent)
    {
        if (this.IsDisposed) return;
        base.OnMouseUp(mevent);
    }
}

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;
}

Answer 3

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

  

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

例如：

＆＃13;

＆＃13;

.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; }

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;