Question

我一直在尝试修复背景图像，以便完整图像显示其完整尺寸。截至目前的图像显示，但它看起来像是放大了。我玩css并重新调整图像大小几次但没有任何效果。目前正在使用此模板：http://www.tooplate.com/view/2076-zentro

HTML：

    <!-- home section -->
    <section id="home" class="parallax-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <h1>Cozinha Bomtempo</h1>
                    <h2>CLEAN &amp; SIMPLE DESIGN</h2>
                    <a href="#gallery" class="smoothScroll btn btn-  default">LEARN MORE</a>
                </div>
            </div>
        </div>      
    </section>

CSS：

    #home {
      background: url('../images/telma1.jpg') 50% 0 repeat-y fixed;
      -webkit-background-size: cover;
      background-size: cover;
      background-position: center;
      color: #ffffff;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      height: 100vh;
      text-align: center;
    }

Answer 1

覆盖并包含调整图像的大小以适合窗口。要真正做到全尺寸，你需要

background-size: [image width]px [image height]px;

要改为始终适合父元素，请使用

background-size: 100% 100%;

Answer 2

如果您不必确定背景纵横比的任何内容，请选择背景尺寸：100％100％;否则去背景大小：包含

背景图像不显示完整图像

2 个答案: