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

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

解决方案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 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;
    }
}

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

1 个答案: