引导:覆盖一个全宽图像上的标题

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

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

媒体查询教程：mediaqueries.asp

下面的代码将改变字体大小和填充，因为屏幕将低于像素要求(500 as和200 as)。填充被丢弃，以保持它在图像之下，字体大小也降低了。

解决方案1

JS Fiddle：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 Fiddle：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;
    }
}