CSS属性＆＃34;高度：自动;＆＃34;不适用于背景图片

时间：2016-06-29 00:56:32

标签： html css css3 background-image responsive-images

我有一个具有视差滚动效果的网页，其中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;
}

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

2 个答案:

答案 0 :(得分：3)

您可以使用height:50vh或vh代替

的任何值

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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' -->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

<强> 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;
}
相关问题
最新问题