web-dev-qa-db-ja.com

Bootstrapカルーセルのサイズ変更画像

こんにちは、ブートストラップを使用してwordpressウェブサイトでカルーセルを作成しようとしています。4つのブロックリンクをその隣に配置したいと思います。ブロックがあり、画像は正常にスクロールしていますカルーセルが画像の高さを変えていると考えてください。

画像（640 x 360）があり、4ブロックを90ピクセルの高さにしました。これは、ブロックがカルーセルの底面と同じ高さになるように行いました。ブロックが大きすぎることを除いて。私は問題が何であるか理解していません。そして、私はすべてのCSSを検索しました。

ここに私のコードがあります：

<!--==========================================-->
<!-- Carousel                                 -->
<!--==========================================-->
<div>
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">

            <!--Carousel item 1-->
            <div class="item active">
                <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/ej-manuel.png" alt="buffalo-skyline" width="640" height="360" />
                <div class="carousel-caption">
                    <h4>First Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>

            <!--Carousel item 2-->
            <div class="item">
                <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/image3.jpg" width="640" height="360" />
                <div class="carousel-caption">
                    <h4>Second Thumbnail label</h4>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>

            <!--Carousel item 3-->
            <div class="item">
                <img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3" width="640" height="360" >
                <div class="carousel-caption">
                    <h4>Third Thumbnail label</h4>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>

        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
    </div>
</div>

<!--==========================================-->
<!-- Side Buttons                             -->
<!--==========================================-->
<div>
    <ul class="nav nav-tabs nav-stacked">
        <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
        <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 1</a></li>
        <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 4</a></li>
        <li><a style="background-color: #051223; color: #fff; height: 90px; width: 210px;">Story 5</a></li>
    </ul>
</div>
csswordpresstwitter-bootstrap
11
Jake B

画像がリサイズされる理由は、流動的であるためです。次の2つの方法があります。

  1. 次のようなCSSを使用して、画像に固定寸法を指定します。

    .carousel-inner> .item> img {
 width：640px; 
 height：360px; 
}

  2. これを行うための2番目の方法：

    .carousel {
 width：640px; 
 height：360px; 
}
24
LegendaryAks

これをcssに追加します。

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    width: 100%;
}
22
Alex Z

同じ問題がありました。すべての画像を同じ高さと幅で使用する必要があります。ホームセクションのサイズ変更オプションを使用してウィンドウからペイントアプリケーションを使用して変更し、CSSを使用して画像のサイズを変更することができます。この問題は、タグ内の幅と高さの属性が応答しないために発生する可能性があります。

2
Nilkamal Gotarne

次のコードをWebページプログラミングのヘッドセクションに配置します。

<head>
  <style>.carousel-inner > .item > img { width:100%; height:570px; } </style>
</head>
1
saeed ahmed

画像タグを

<img src="http://localhost:6054/wp-content/themes/BLANK-Theme/images/material/images.jpg" alt="the-buzz-img3"  style="width:640px;height:360px" />

スタイル属性を使用し、画像の高さと幅を設定する画像のCSSクラスがないことを確認してください

0
sangram parmar