背景图像不显示完整图像答案

【问题标题】：Background Image does not display full image背景图像不显示完整图像
【发布时间】：2017-03-26 11:34:36
【问题描述】：

我一直在尝试修复我的背景图片，以便完整图片显示其完整尺寸。截至目前，图像显示，但它看起来像是放大了。我玩了几遍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;
    }

【问题讨论】：

如果封面不符合您的需要，您是否尝试过包含？
我刚试过，没有任何改变：/
您的 telma1.jpg 的尺寸是多少？我假设它类似于您使用的模板的图像？ tooplate.com/templates/2076_zentro/images/home-bg.jpg
原图其实是960 x 720，不过我已经把它改成和home-bg一样的尺寸了
您的图片太小，contain 和cover 都会将图片缩放到容器中。解决方案是：使用压缩率较低的较大图像（因此您获得相同的尺寸）。这样即使在最好的小工具上也不会显得模糊。

标签： html css image background-image

【解决方案1】：

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

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

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

background-size: 100% 100%;

【讨论】：

或将包含背景图像的 div 调整为 100% 的高度和宽度。

【解决方案2】：

如果您不需要确定背景的纵横比，请选择 background-size:100% 100%; else go for background-size:contain

【讨论】：