Question

我正在制作一张50％折扣的旋转木马。它与引导现代业务模板中的相同。在重新调整页面大小没有运气的时候，我尝试了多种方法让图像响应。图像为1920px x 740px。第一个是半页时正确对齐，但是当它处于全屏模式时会被切断。第3张图片中的代码是模板中的代码，前两张是我尝试修复它的方法。

旋转木马正确滚动，按钮工作等等。它只是我无法弄清楚的响应部分。

这是我在这里的第一篇文章，所以如果您需要更多信息，请告诉我。如果格式不正确，我也很抱歉。谢谢你的任何＆amp;一切都有帮助

<div class="carousel-inner">
        <div class="item active">
            <img src=img/logo3.jpg alt="Logo" class="img-responsive">
            <div class="carousel-caption">
                <h2></h2>
            </div>
        </div>
        <div class="item">
         <img src=img/logo2.jpg alt="Logo" class="img-responsive">
            <div class="carousel-caption">
                <h2>Caption 2</h2>
            </div>
        </div>
        <div class="item">
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
            <div class="carousel-caption">
                <h2>Caption 3</h2>
            </div>
        </div>
    </div>

我正在使用的模板中有2个.css文件。这是两个旋转木马的css

/* Home Page Carousel */

header.carousel {
height: 50%;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 100%;
}

header.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}

第二个 - 我没有包含控件css，因为该部分正在运行。

.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: .6s ease-in-out left;
   -o-transition: .6s ease-in-out left;
      transition: .6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item {
-webkit-transition: -webkit-transform .6s ease-in-out;
     -o-transition:      -o-transform .6s ease-in-out;
        transition:         transform .6s ease-in-out;

-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
-webkit-perspective: 1000;
        perspective: 1000;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
}
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}

Answer 1

如何改变你的课程：

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}

为：

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
display: block;
max-width: 100%;
height: auto;
}

并检查出来。

Bootstrap Carousel并非全屏响应

1 个答案: