Question

我知道这里有很多关于Bootstrap Carousel图像尺寸问题的问题，但我还没有找到解决我遇到的问题的方法。我老实说不确定问题出在哪里，因为这是我第一次使用Bootstrap。

我有一个旋转木马，我计划显示八种不同的图像，各种宽度和高度。目前，为了测试目的，我将图像的高度设置为500px或更低。我现在的旋转木马看起来......在我的1080p笔记本电脑上是公平的。指标的位置有点偏，但我不知道是否可以改变。我现在遇到的最大问题是它在移动设备上的外观（我使用iPhone5c进行测试。）我已将每种图像样式的样式设置为"object-fit: cover; overflow: hidden;"并使用"img-responsive"类，但在移动设备上，图像由于某种原因不会调整大小。在修理这个Carousel时，我真的不知道从哪里开始。

测试页面在这里：http://mcthompson.info/suzaku/index.html

这里是现在上传的仅与轮播相关的代码。任何帮助将不胜感激：

HTML

        <div class="container" id='indexslide'>
        <div id="main_slide" class="carousel slide" data-ride='carousel'>
            <ol class="carousel-indicators">
                    <li class="item1 active"></li>
                    <li class="item2"></li>
                    <li class="item3"></li>
                    <li class="item4"></li>
                    <li class="item5"></li>
                    <li class="item6"></li>
                    <li class="item7"></li>
                    <li class="item8"></li>
                </ol>
                <!--slides-->
                <div class="carousel-inner" role="listbox" style="width:100%; height: 510px !important;">
                    <div class="item active">
                        <img src='babyhuck1.jpg' alt style="object-fit: cover; overflow: hidden;" class="img-responsive">
                    <div class="carousel-caption">
                        <h3>Baby Huck</h3>
                        <p>Demo text blah blah blah</p>
                    </div>
                </div>

                <div class="item">
                    <img src='bamboo1.jpg' alt style="object-fit: cover; overflow: hidden;">
                    <div class="carousel-caption">
                        <h3>Bamboo</h3>
                        <p>2 Demo text blah blah blah</p>
                    </div>
                </div>

                <div class="item">
                    <img src='magnolias1.jpg' alt style="object-fit: cover; overflow: hidden;">
                    <div class="carousel-caption">
                        <h3>Magnolias</h3>
                        <p>3 Demo text blah blah blah</p>
                    </div>
                </div>

                <div class="item">
                    <img src='peacock1.jpg' alt style="object-fit: cover; overflow: hidden;">
                    <div class="carousel-caption">
                        <h3>Peacock</h3>
                        <p>4 Demo text blah blah blah</p>
                    </div>
                </div>

                <div class="item">
                    <img src='maiko.jpg' alt style="object-fit: cover; overflow: hidden;">
                    <div class="carousel-caption">
                        <h3>Maiko</h3>
                        <p>5 Demo text blah blah blah</p>
                    </div>
                </div>

                <div class="item">
                    <img src='waterlillies.jpg' alt style="object-fit: cover; overflow: hidden;">
                    <div class="carousel-caption">
                        <h3>Water Lilies</h3>
                        <p>6 Demo text blah blah blah <a href=image3.JPG>CLICK</a></p>
                    </div>
                </div>

                <div class="item">
                    <img src='cityscape1a.jpg' style="object-fit: cover; overflow: hidden;" alt>
                    <div class="carousel-caption">
                        <h3>Cityscape 1</h3>
                        <p>7 Demo text blah blah blah</p>
                    </div>
                </div>

                <div class="item">
                    <img src='cosmos1.jpg' alt style="object-fit: cover; overflow: hidden;">
                    <div class="carousel-caption">
                        <h3>Cosmos 1</h3>
                        <p>8 Demo text blah blah blah</p>
                    </div>
                </div>
            </div>

                <a class="left carousel-control" href="#main_slide" role="button" data-slide='prev'>
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>

              <a class="right carousel-control" href="#main_slide" role="button" data-slide='next'>
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
              </a>
            </div>
        </div>
    </div>

CSS

.carousel-inner > .item > img {
    margin: 0 auto;
    max-width: none;
}

/* Mobile */
@media (min-width: 320px) {
    .slider-size {
        height: auto;
    }
    .slider-size > img {
         width: 80%;
    }
}

/* tablets */
@media (max-width: 991px) and (min-width: 768px) {
    .slider-size {
        height: auto;
    }
    .slider-size > img {
        width: 80%;
    }
}

/* laptops */
@media (min-width: 992px) {
    .slider-size {
        height: 200px;
    }
    .slider-size > img {
        width: 60%;
    }
}

/* desktops */
@media (min-width: 1024px) {
    .slider-size {
        height: 300px;
    }
    .slider-size > img {
        width: 60%;
    }
}

/*slide caption*/
.carousel-caption h3 {
    font-family: 'Della Respira', serif;
    text-shadow: 2px 2px black;
}

Answer 1

我已经使用img-responsive将一个bootply放在一起显示一个正常运行的bootstrap轮播。

可以完全使用bootstrap完成。查看代码后，有一些东西导致与img-responsive类冲突，但我无法找到它。我建议用bootply替换你的轮播代码，如果它正常工作，那么只需放入你自己的图像并添加标题。

http://www.bootply.com/VSBjMEUu1Z

Bootstrap Carousel xs（移动）设备的图像大小和放置问题

1 个答案: