Bootstrap：在全宽图像上覆盖标题

Question

我在导航栏下方有一个全页宽度的图像，然后将标题放在它上面。

问题是，无论页面大小如何，我似乎都无法弄清楚如何始终将其置于死点。在页面完全打开的那一刻，标题在中间，但是在调整大小时文本会下降。

有什么想法吗？

 <div class="row">
    <div id="header-image">
        <img src="images/header2.jpg" alt="header" class="img-responsive">


        <div class="row">

             <div class="col">
                <h2 class="text-center">About Us</h2>
            </div>

        </div>


    </div><!-- end header image -->
 </div><!-- end row -->


#header-image{width: 100%; height: auto; margin-top: 50px; position: relative; min-height: 200px; }
#header-image h2{color: white; font-size: 5em; font-family: 'cmlight'; position: relative; padding-top: 10%; }
#header-image .col {position: absolute; z-index: 1;  top: 0; left: 0; width: 100%; }

Answer 1

使用基于屏幕大小的媒体查询允许您根据屏幕分辨率使用不同的 CSS。你滚动的屏幕越小，它就会相应地改变它的 CSS。

媒体查询教程：http://www.w3schools.com/css/css_rwd_mediaqueries.asp

当屏幕低于像素要求（500 像素和 200 像素）时，以下代码将更改字体大小和内边距。内边距被删除以使其保持在图像下方，并且字体大小也被降低了。

解决方案 1

JS 小提琴：https://jsfiddle.net/Lq2zj48j/7/

#header-image {
  width: 100%;
  height: auto;
  margin-top: 50px;
  position: relative;
  min-height: 200px;
}

#header-image h2 {
  color: white;
  font-size: 5em;
  font-family: 'cmlight';
  position: relative;
  padding-top: 10%;
}

#header-image .col {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
}

@media only screen and (max-width: 500px) {
    #header-image h2 {
      font-size: 4em;
      padding-top: 5%;
    }
}

@media only screen and (max-width: 200px) {
    #header-image h2 {
      font-size: 2em;
      padding-top: 1%;
    }
}

---

解决方案 2

此解决方案有可能“挤压”图像。为避免这种情况，您可以在 CSS 中设置图像（#header-image 上的背景图像的一部分）。从那里您可以将其设置为不重复、居中，然后使用媒体查询来保持宽高比并在调整大小时在图像上“放大”。

background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg');
  background-size: 1200px 652px; /* The dimentions of your image */
  background-position: center;
  background-repeat: no-repeat;

Js 小提琴：https://jsfiddle.net/Lq2zj48j/8/

#header-image {
  width: 100%;
  height: 400px;
  margin-top: 50px;
  position: relative;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg');
  background-size: 1200px 652px; /* The dimentions of your image */
  background-position: center;
  background-repeat: no-repeat;
}

#header-image h2 {
  color: white;
  font-size: 5em;
  font-family: 'cmlight';
  position: relative;
  padding-top: 10%;
}

#header-image .col {
  position: relative;;
  width: 100%;
}

@media only screen and (max-width: 700px) {
    #header-image h2 {
      font-size: 4em;
      padding-top: 5%;
    }
    #header-image {
      height: 300px;
    }
}

@media only screen and (max-width: 500px) {
    #header-image h2 {
      font-size: 4em;
      padding-top: 5%;
    }
    #header-image {
      height: 200px;
    }
}

@media only screen and (max-width: 200px) {
    #header-image h2 {
      font-size: 2em;
      padding-top: 1%;
    }
    #header-image {
      height: 175px;
    }
}