html - CSS 属性“高度：自动；” 不适用于背景图像

Question

我有一个具有视差滚动效果的网页，其中 CSS 属性height: auto;在三个背景图像中的任何一个的任何类中都不起作用。当我使用height: auto;图像消失。上传的三张图片的尺寸分别为w = 1280px和h = 800px。如果我使用height: 641px，那么图像会按比例缩小到w = 1025px和h = 641px。如果我使用不同的高度，那么宽度仍然是 1025px，但高度会更改为 CSS 中的值。这三个 CSS 类是：

.bgimg-1 {
  background-image: url("https://c2.staticflickr.com/8/7321/27335183304_11cd309852_b.jpg");
  max-width: 100%;
  height: 641px;
}
.bgimg-2 {
  background-image: url("https://c2.staticflickr.com/8/7632/27335194304_72890c2d62_b.jpg");
  max-width: 100%;
  height: 641px;
}
.bgimg-3 {
  background-image: url("https://c2.staticflickr.com/8/7436/27947379025_844956bcf0_b.jpg");
  max-width: 100%;
  height: 641px;
}

该页面及其使用的 HTML 和 CSSheight: 641px;可以在http://codepen.io/mlswartz/full/NrpzpN/查看。这需要修复，以便正确响应图像。我正在使用 Bootstrap 3.3.6 和 Font-awesome 4.6.3。我使用的显示器具有 5:4 的纵横比，屏幕分辨率为 1280 x 1024。

Answer 1

您可以使用height:50vh或任何值来vh代替

body,
html {
  height: 100%;
  margin: 0;
}
h1 {
  text-align: center;
  font-size: 3.5em;
  color: #FF0000;
}
h2 {
  font-size: 1.5em;
}
a {
  color: #FF0000;
}
a:hover {
  color: #00FF00;
}
.row {
  display: flex;
}
.side-panels {
  background-image: url("https://c2.staticflickr.com/8/7676/27334382193_951bb3afa6_m.jpg");
  background-attachment: fixed;
}
#navigation {
  position: fixed;
  top: 0px;
  width: 100%;
  background-color: #000000;
  color: #FF0000;
}
#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #000000;
  color: #FF0000;
}
.social-buttons {
  position: absolute;
  top: 22%;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
  position: relative;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 100%;
  height: 50vh
}
.bgimg-1 {
  background-image: url("https://c2.staticflickr.com/8/7321/27335183304_11cd309852_b.jpg");
}
.bgimg-2 {
  background-image: url("https://c2.staticflickr.com/8/7632/27335194304_72890c2d62_b.jpg");
}
.bgimg-3 {
  background-image: url("https://c2.staticflickr.com/8/7436/27947379025_844956bcf0_b.jpg");
}
.about-me-box {
  position: absolute;
  width: 80%;
  margin-top: 11.3%;
  margin-left: 8.5%;
  opacity: 0.7;
}
.about-me-text {
  background-color: white;
  font-size: 1.5em;
  color: #000000;
  text-align: justify;
  padding: 5% 6% 5% 6%;
}
.portfolio-box {
  position: absolute;
  margin-top: -.38%;
  margin-left: 16%;
}
.project-boxes {
  margin-right: 5.5%;
  margin-bottom: 7%;
  margin-left: 9.5%;
  opacity: 0.95;
}
.contact-box {
  position: absolute;
  width: 80%;
  margin-top: 5.08%;
  margin-left: 8.55%;
}
.get-info-box {
  background-color: white;
  position: absolute;
  width: 80%;
  margin-left: 10%;
  padding: 4.5% 5% 3% 5%;
  opacity: 0.92;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-1 side-panels"></div>
    <div class="col-xs-10">
      <div class="bgimg-1" id="about-me">
        <div class="col-xs-12">
          <div class="about-me-box">
            <h1>&lt;about-me\&gt;</h1>
            <div class="about-me-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
              irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
              adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis</div>
          </div>
          <!-- end 'about-me-box' -->
        </div>
        <!-- end 'col-xs-12' -->
      </div>
      <!-- end 'bgimg-1' -->
      <div class="bgimg-2" id="portfolio">
        <div class="col-xs-12">
          <div class="portfolio-box">
            <h1>&lt;portfolio\&gt;</h1>
            <div class="row">
              <div>
                <div style="text-align: left;">
                  <img src="https://c2.staticflickr.com/8/7352/27913553156_b94863e654.jpg" class="img-responsive project-boxes">
                </div>
                <div style="text-align: left;">
                  <img src="https://c2.staticflickr.com/8/7546/27335393704_3f3da88521.jpg" class="img-responsive project-boxes">
                </div>
              </div>
              <div>
                <div style="text-align: center;">
                  <img src="https://c2.staticflickr.com/8/7439/27335383754_7893f67c47.jpg" class="img-responsive project-boxes">
                </div>
                <div style="text-align: center;">
                  <img src="https://c2.staticflickr.com/8/7369/27335397614_c57a904d58.jpg" class="img-responsive project-boxes">
                </div>
              </div>
              <div>
                <div style="text-align: right;">
                  <img src="https://c2.staticflickr.com/8/7654/27335389644_a229e24a25.jpg" class="img-responsive project-boxes">
                </div>
                <div style="text-align: right;">
                  <img src="https://c2.staticflickr.com/8/7384/27668437480_3241364329.jpg" class="img-responsive project-boxes">
                </div>
              </div>
            </div>
            <!-- end 'row' -->
          </div>
          <!-- 'portfolio-box' -->
        </div>
        <!-- end 'col-xs-12' -->
      </div>
      <!-- end 'bgimg-2' -->
      <div class="bgimg-3" id="contact">
        <div class="col-xs-12">
          <div class="contact-box">
            <h1>&lt;contact-me\&gt;</h1>
            <div class="get-info-box">
              <form>
                <div class="form-group">
                  <input type="text" id="name" name="user_name" class="form-control" placeholder="Name (required)" required/>
                </div>
                <div class="form-group">
                  <input type="email" id="email" name="user_email" class="form-control" placeholder="Email address (required)" required/>
                </div>
                <div class="form-group">
                  <input type="text" id="phone" name="user_phone" class="form-control" placeholder="Phone number (optional)" maxlength="14" />
                </div>
                <div class="form-group">
                  <textarea type="text" id="comment" name="user_comment" class="form-control" placeholder="Type your comment here (required) 500 characters max" required rows="7" maxlength="500"></textarea>
                </div>
                <button class="btn btn-primary pull-right" type="submit">
                  <i class="fa fa-paper-plane"></i> Submit
                </button>
              </form>
            </div>
            <!-- end 'get-info-box' -->
          </div>
          <!-- end 'contact-box' -->
        </div>
        <!-- 'col-xs-12' -->
      </div>
      <!-- end 'bgimg-3' -->
      <div class="bgimg-1"></div>
    </div>
    <!-- end 'col-xs-10' -->
    <div class="col-xs-1 side-panels"></div>
  </div>
  <!-- end 'row' -->
</div>
<!-- end 'container-fluid' -->
<div class="container-fluid" id="navigation">
  <div class="row">
    <div class="col-xs-6">
      <h2 id="myName" style="color: #FF0000;">&lt;michael-swartz\&gt;</h2>
    </div>
    <div class="col-xs-2"><a href="#about-me"><h2>About Me</h2></a>
    </div>
    <div class="col-xs-2"><a href="#portfolio"><h2>Portfolio</h2></a>
    </div>
    <div class="col-xs-2"><a href="#contact"><h2>Contact</h2></a>
    </div>
  </div>
</div>
<div class="container-fluid" id="footer">
  <div class="row">
    <div class="col-xs-4">
      <h2 id="myName" style="color: #FF0000;">&lt;social-media-links\&gt;</h2>
    </div>
    <div class="col-xs-1">
      <a href="http://www.facebook.com" target="_blank"><i class="fa fa-facebook fa-2x social-buttons"></i></a>
    </div>
    <div class="col-xs-1" class="social-buttons">
      <a href="http://www.freecodecamp.com" target="_blank"><i class="fa fa-fire fa-2x social-buttons"></i></a>
    </div>
    <div class="col-xs-1">
      <a href="http://www.github.com" target="_blank"><i class="fa fa-github fa-2x social-buttons"></i></a>
    </div>
    <div class="col-xs-1" class="social-buttons">
      <a href="http://www.linkedin.com" target="_blank"><i class="fa fa-linkedin fa-2x social-buttons"></i></a>
    </div>
    <div class="col-xs-1">
      <a href="http://www.pinterest.com" target="_blank"><i class="fa fa-pinterest fa-2x social-buttons"></i></a>
    </div>
    <div class="col-xs-1" class="social-buttons">
      <a href="https://stackoverflow.com/users/1476365/michael-swartz" target="_blank"><i class="fa fa-stack-overflow fa-2x social-buttons"></i></a>
    </div>
    <div class="col-xs-1">
      <a href="http://www.tumblr.com" target="_blank"><i class="fa fa-tumblr fa-2x social-buttons"></i></a>
    </div>
    <div class="col-xs-1">
      <a href="http://www.twitter.com" target="_blank"><i class="fa fa-twitter fa-2x social-buttons"></i></a>
    </div>
  </div>
</div>
<!-- end 'container-fluid' -->

Answer 2

CSS2

如果您需要使图像更大，则必须在图像编辑器中编辑图像本身。

如果您使用 img 标签，您可以更改大小，但是如果您需要图像作为其他内容的背景（并且它不会像您想要的那样重复），那不会给您想要的结果...

CSS3 释放力量

这可以在 CSS3 中使用 background-size 来实现。

所有现代浏览器都支持这一点，因此除非您需要支持旧浏览器，否则这是实现它的方法。

支持的浏览器：

Mozilla Firefox 4.0+ (Gecko 2.0+)、Microsoft Internet Explorer 9.0+、Opera 10.0+、Safari 4.1+ (webkit 532) 和 Chrome 3.0+。

.bgimg-1, .bgimg-2, .bgimg-3 {
    /* width: will stretch to width of element, height: 641px */
    background-size: 100% 641px;
}