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

Question

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

我有一个轮播，我计划展示八张不同的图片，所有图片的宽度和高度都不同。目前，出于测试目的，我将图像的高度设置为 500 像素或更小。我现在拥有的旋转木马在我的 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

我已经整理了一个 bootply，显示了一个使用 img-responsive 的功能引导轮播。

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

http://www.bootply.com/VSBjMEUu1Z