Question

如何在不拉伸的情况下放置完整的背景图像或使用高质量像素重复图像我不希望图像看起来像拉伸图像

html代码

<div class="carousel-inner">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill fill" style="background-image:url('img/intro%205.jpg');"></div>
                <div class="carousel-caption">
                    <h1>P-DECO</h1>
                <p>YOUR   PARTNER   TO   THE   TOP </p>
                </div>
            </div>
        </div></div>

css代码：

.fill {
    width: 100%;
    height:300px;
    background-position:center ;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
    -o-background-size:contain;
    background-repeat: no-repeat; background-size: 100% 100%;background-origin: content-box;
    z-index: 1030;
    position: fixed; 
}

Answer 1

你试过吗

background-size: cover;

如果你想在整个元素上覆盖背景，那么我认为这是解决方案。

如何在不拉伸的情况下放置完整的背景图像或使用高质量像素重复图像我不希望图像看起来像拉伸图像。

我认为当你的图像尺寸大于你的元素尺寸时，它是可能的。

完整图像，无需拉伸或重复使用高质量像素

1 个答案: