Question

我希望我的引导程序轮播占用进入我网站的用户的整个页面。但是，由于显示器之间的宽高比和分辨率差异，我想知道最好的方法是什么？

我想我应该首先选择相对大小的图像来开始。这是我到目前为止所做的。

的CSS：

img {
    background-size: cover;
    background-position: center center;
    background-repeat:no-repeat;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

如果我使用的图像具有超高分辨率，该怎么办？这不适合用户的页面吗？

Answer 1

我相信这会奏效，但我无法确定。但你可以在这里看到它：

http://jsfiddle.net/heyallanmoreno/7tdvu/4/

     <section class="block">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="active item">
                <img src="http://lorempixel.com/1024/750" alt="Slide1" />
            </div>
            <div class="item">
                <img src="http://lorempixel.com/1024/750" alt="Slide2" />
            </div>
            <div class="item">
                <img src="http://lorempixel.com/1024/750" alt="Slide3" />
            </div>
        </div>
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
 <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>

    </div>
</section>

和，

.carousel .item {
    width: 100%; /*slider width*/
    max-height: 600px; /*slider height*/
}
.carousel .item img {
    width: 100%; /*img width*/
}
/*add some makeup*/
.carousel .carousel-control {
    background: none;
    border: none;
    top: 50%;
}
/*full width container*/
@media (max-width: 767px) {
    .block {
        margin-left: -20px;
        margin-right: -20px;
    }
}

希望这会对你有所帮助。

引导轮播的分辨率和宽高比图像大小

1 个答案: