1. ホーム
  2. jquery

[解決済み】カルーセルで画像を中央に配置する方法

2022-02-15 12:21:17

質問

カルーセルで画像を中央に配置する方法は? ブートストラップチュートリアルのコードを使って、ブートストラップ3のカルーセルを試してみました。

                <a href="/Webconte/Details/124">
                    <img src="/Webconte/Image/124" />
                </a>
            </div>
            <div class="item ">

                <a href="/Webconte/Details/123">
                    <img src="/Webconte/Image/123" />
                </a>
            </div>
            <div class="item ">

                <a href="/Webconte/Details/105">
                    <img src="/Webconte/Image/105" />
                </a>
            </div>
            <div class="item ">

                <a href="/Webconte/Details/95">
                    <img src="/Webconte/Image/95" />
                </a>
            </div>
            <div class="item ">

                <a href="/Webconte/Details/107">
                    <img src="/Webconte/Image/107" />
                </a>
            </div>
            <div class="item ">

                <a href="/Webconte/Details/100">
                    <img src="/Webconte/Image/100" />
                </a>
            </div>
            <div class="item ">

                <a href="/Webconte/Details/98">
                    <img src="/Webconte/Image/98" />
                </a>
            </div>
            <div class="item ">

                <a href="/Webconte/Details/78">
                    <img src="/Webconte/Image/78" />
                </a>
            </div>
            <div class="item ">

                <a href="/Webconte/Details/11">
                    <img src="/Webconte/Image/11" />
                </a>
            </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        </a>
    </div>

ワイド画面では、カルーセルの画像は左寄せになり、画像の右側に醜い空白ができます。 カルーセルをもっときれいにするには?画像を中央寄せにしたり、他の解決策はありますか?

解決方法は?

次の2つの選択肢があります。

  1. カルーセル全体に画像を表示させたい場合
img 
{
   width: 100%;
   height: auto;
}

  1. 画像を100%引き伸ばしたくない場合は、幅を指定し(指定しない場合はマージンを指定)、マージンを自動にしてください。
img
{
   width: 50%;
   margin: auto;
}