How to apply css to bootstrap carousel image

[newcoder1010]

Hello,

<div id="carousel-block-generic" class="carousel slide" data-ride="carousel" data-wrap="true" data-interval="4000" data-pause="hover">
            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                            <li data-target="#carousel-block-generic" data-slide-to="0" class="indicator-item">
                        </li>
                                            <li data-target="#carousel-block-generic" data-slide-to="1" class="indicator-item">
                        </li>
                                            <li data-target="#carousel-block-generic" data-slide-to="2" class="indicator-item active">
                        </li>
                                    </ol>
            
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                                    <div class="carousel-item item">
                        <img src="/sites/default/files/bootstrap_simple_carousel/we-buy-office-building.jpg" class="carousel-image img-fluid" alt="" title="">
                        <div class="carousel-caption">
                            <h3> title 1 </h3>                            <p> caption 1 </p>                        </div>
                    </div>
                                    <div class="carousel-item item">
                        <img src="/sites/default/files/bootstrap_simple_carousel/we-buy-office-building_0.jpg" class="carousel-image img-fluid" alt="" title="">
                        <div class="carousel-caption">
                            <h3> title 1 </h3>                            <p> caption 2 </p>                        </div>
                    </div>
                                    <div class="carousel-item item active">
                        <img src="/sites/default/files/bootstrap_simple_carousel/we-buy-office-building_1.jpg" class="carousel-image img-fluid" alt="" title="">
                        <div class="carousel-caption">
                            <h3> title </h3>                            <p> caption 2 </p>                        </div>
                    </div>
                            </div>

            <!-- Controls -->
                            <a class="left carousel-control carousel-control-prev" href="#carousel-block-generic" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left carousel-control-prev-icon"></span>
                </a>
                <a class="right carousel-control carousel-control-next" href="#carousel-block-generic" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right carousel-control-next-icon"></span>
                </a>
                    </div>

Default CSS on image:

.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    height: auto;
}

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    line-height: 1;
}

Original images heights are 575px and 700px width. I just wanted to make the images width 100%. Once I apply css as width:100%, images height become more than the original heights. 

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
    line-height: 1;
width: 100%
}

How can I make the images 100% width by keeping the original heights? Thanks!

[dsonesuk]

That is because they are growing in height proportionately, you would have to set a max-height of the original height. But! Remember the  images will now be proportionately incorrect.

[newcoder1010]

.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 550px;
    width: 100%;
}

Now it is better than before. But the problem is that as I am screen sizes are decreasing, the images do not look good because it is trying to fit image on smaller screen with the same height. How can I fix it? Thanks!

[dsonesuk]

Either try max-height as a percentage value. Or use media queries to set height depending on device size.

[newcoder1010]

Thank you!