0

ページが 50% オフのカルーセルに取り組んでいます。これは、ブートストラップ モダン ビジネス テンプレートにあるものと同じです。ページのサイズを変更したときに画像をレスポンシブにする方法をいくつか試しましたが、うまくいきませんでした。画像は 1920px x 740px です。最初のものは、半分のページの場合は正しく配置されますが、フルスクリーン モードの場合は切り取られます。3 番目の画像のコードはテンプレートに含まれているもので、最初の 2 つは修正を試みたものです。

カルーセルは正しくスクロールし、ボタンは機能します。それは、私が理解できない応答部分です。

これは私の最初の投稿ですので、他に必要な情報があればお知らせください。また、これが正しくフォーマットされていない場合はお詫び申し上げます。助けてくれてありがとう。

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

そして2つ目は、その部分が機能しているため、コントロール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 に答える