CSS 属性 "height: auto;" 不适用于背景图片

Question

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

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

Answer 1

CSS2

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

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

CSS3释放力量

这可以在 CSS3 中使用背景大小来完成。

所有现代浏览器都支持此功能，因此除非您需要支持旧浏览器，否则这就是实现方式。

支持的浏览器：

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

Answer 2

您可以使用 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://whosebug.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' -->

CSS 属性 "height: auto;" 不适用于背景图片

CSS property "height: auto;" isn't working for background images

html

css

background-image

responsive-images