拡大されすぎている画像を画面の枠いっぱいにおさまるようにしたい

Question

前提・実現したいこと

拡大されすぎている画像を画面の枠いっぱいにおさまるようにしたいです。

該当のソースコード

<!--- start image slider--->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="5000">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <!--- slide1--->
            <div class="carousel-item active slider-wrapper" style="background-image:url(img/slide0.jpg);">
                <div class="carousel-caption text-center">
                    <h1>Welcome To NUno</h1>
                    <h3>Animated Bootstrap Theme</h3>
                    <a class="btn btn-outline-light btn-lg" href="#course">Get Started</a>
                </div>
            </div>
            <!---slider2--->
            <div class="carousel-item" style="background-image:url(img/slide1.jpg);"></div>
            <!---slider3--->
            <div class="carousel-item" style="background-image:url(img/slide2.jpg);"></div>
        </div><!--- end carousel--->
        <!---prev next button-->
        <div class="prevnext-btn">
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
            </a>
        </div>
     </div>
     <!--- end image slider--->

.carousel-item {
    height: 100vh;
}

.carousel-item img {
    max-width: 100%;
}

.carousel-caption {
    position: absolute;
    top: 38%;
    text-transform: uppercase;
    width: 100%;
    right: 0;
    left: 0;
}

.carousel-caption h1 {
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: .3rem;
    text-shadow: .1rem .1rem .8rem black;
    padding-bottom: 1rem;
}

.carousel-caption h3 {
    font-size: 2rem;
    text-shadow: .1rem .1rem .5rem black;
    padding-bottom: 1.1rem;
}

.btn-lg {
    border-width: medium;
    border-radius: 0;
    font-size: 1.1rem;
}
.slider-wrapper{
    z-index: 1;
}
.prevnext-btn{
    z-index: 2;
}

/*---course---*/

.narrow {
    width: 75%;
    margin: 0 auto;
    padding-top: 2rem;
}

.btn-md {
    border-width: medium;
    border-radius: 0;
    padding: .6rem 1.1rem;
    text-transform: uppercase;
    margin: 1rem;
}

.jumbotron {
    border-radius: 0em;
    padding: 3rem 0 2rem;
}

h3.heading {
    font-size: 1.9rem;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 1.9rem;
}

.heading-underline {
    width: 3rem;
    height: .2rem;
    background-color: #1ebba3;
    margin: 0 auto 2rem;
}

試したこと

max-width 100%
などを試みましたが、ダメでした。

<div>タグの中の画像の大きさを変える方法を教えてください。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

.carousel-item imgはHTML上にimg要素がないと効きません。

幅が合えばよいのであれば。

.carousel-item {
    height: 100vh;
    background-size: 100% auto; /* add */
}

要素全体であるほうが良いなら。

.carousel-item {
    height: 100vh;
    background-size: cover; /* add */
}

【background-size - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/background-size

Comments

[RyoYo]

無事に解決しました！！
ありがとうございます。