0

我正在制作一个页面折扣 50% 的轮播。它与引导现代业务模板中的模板相同。我尝试了多种方法来让图像在重新调整页面大小时响应，但没有成功。图像为 1920 像素 x 740 像素。第一个在半页时正确对齐，但在全屏模式下被切断。第三张图片中的代码是模板中的代码，前两个是我修复它的尝试。

轮播正确滚动，按钮工作等。这只是我无法弄清楚的响应部分。

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

<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%;
}
4

1 回答 1

0

改变你的班级怎么样：

.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;
}

并检查出来？

于 2014-11-25T16:39:46.207 回答