html - 没有拉伸(stretch)或重复的完整图像，具有高质量像素

Question

我怎样才能在没有拉伸(stretch)的情况下放置完整的背景图像或使用高质量像素重复图像我不希望图像看起来像拉伸(stretch)图像

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;

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

how can i put a full background image without stretch or repeat the image with high quality pixel i don't want image look like stretching image.

我认为当您的图像尺寸大于您的元素尺寸时这是可能的。