Question

我已经尝试了我在SO上找到的所有组合尝试解决这个问题，但我没有运气......所以这就是我的问题。

我遇到了一个问题，我无法找到正确的css组合（我认为这可以通过纯css完成）来获得完美的方形图像来填充网站的背景I＆＃39;正在努力。方形图像是来自中画幅胶片相机的扫描，他们看不到想要合身。然而，数码相机的图像非常合适。对于方形图像，它看起来像切断了所有4个边的部分。

以下是代码：

＆＃13;

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel {
  position: relative;
}

＆＃13;

    <!-- Full Page Image Background Carousel Header -->
    <header id="myCarousel" class="carousel slide">
        <!-- Wrapper for Slides -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://testing.bitzer.me/kirstenleah/img/bg.jpg');"></div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url('img/bg1.jpg');"></div>
            </div>
        </div>
    </header>

＆＃13;

您可以在http://testing.bitzer.me/kirstenleah/index.html

看到这一点

这两个图像都是800x800像素，并且正在被裁剪以不显示整个图像。

我真的很欣赏这里的一些方向，以便整个图像显示在背景上。

Answer 1

您只能将屏幕填充到浏览器窗口的大小，这是一个矩形。因此，如果您的图像是正方形，那么您只能在顶部和底部与屏幕边缘相遇，两侧将有间隙。如果你伸展两侧以便水平相遇并且想要保持比例，那么顶部和底部将会切断 - 正如你的例子中所发生的那样。

您需要做的是妥协。使用以下内容：

background-size:contain;
          or
background-size:cover;
          or
background-size: auto 100%;
          or
background-size: 100% auto;

尝试一下，看看它们是如何运作的 - 确保每个窗口都可以调整窗口的大小，以便您可以观察它们的响应方式 -

如果您想让图片完全覆盖任何尺寸的屏幕，您可以使用媒体查询从 100％自动切换到自动100％在浏览器窗口比例交替且另一组维度优先的确切位置。

如果你想更好地澄清你的问题并加入一个jsfiddle，我会很高兴为你看，因为我知道这听起来很混乱。

Answer 2

最后三个属性应该具有魔力：

.fill {
    width: 100%;
    height: 100%;
    background-color:#ccc;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

我可以放置方形图像来填充引导背景图像滑块而不裁剪图像吗？

2 个答案: