locked
how to set fixed height for all carasoul banner images RRS feed

  • Question

  • User-1355965324 posted

    I am using the following  html , I am trying to set the height to the carousel  section of the page. All carasoul images have to be shown in fixed height in a div. How can I  set a section or class name to give  to set the carousel section . Please can you suggest the code  to give  same height to all images in carsoul. Please help

        <!doctype html>
        <html lang="en">
        
        <head>
            <title>Bootstrap Theme The Band</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
            <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
            <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
            <link rel="stylesheet" href="../css/site.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        
        
        </head>`
        
        <body>
            
                <div class="row">              
                         
                             <div id="imageCarousel" class="carousel slide" data-interval="2000" data-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="item active">
                                        <img src="../assets/images/banner_1.jpg" class="img-responsive">
                                        <div class="carousel-caption">
                                            <h3>Banner1</h3>
                                            <p>sdfdsfhsdfjhsdkj</p>
                                        </div>
                                    </div>
                
                                    <div class="item">
                                        <img src="c:\PThreeSolution/assets/images/banner_2.jpg" class="img-responsive">
                                        <div class="carousel-caption">
                                            <h3>Banner2</h3>
                                            <p>asdsdd dasdasdsad</p>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="c:\PThreeSolution/assets/images/banner_3.jpg" class="img-responsive">
                                        <div class="carousel-caption">
                                            <h3>Banner3</h3>
                                            <p>asdasd asdasda asdsa</p>
                                        </div>
                                    </div>
                
                
                                </div>
                            </div>
                         
                    
                </div>
           
        
            
        
        
        
        
        </body>
        
        </html>
    

    This is my custom css file

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

    Sunday, July 14, 2019 2:21 PM

Answers

  • User839733648 posted

    Hi polachan,

    According to your description and code, I suggest that you could give a fixed dimension to your image using CSS as follow.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Bootstrap Theme The Band</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="../css/site.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        <style>
            .carousel-inner > .item > img {
                width: 100%;
                height: 500px !important;
            }
        </style>
    </head>
    <body>
        <div class="row">
    
            <div id="imageCarousel" class="carousel slide" data-interval="2000" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="Image/test1.jpg" class="img-responsive">
                        <div class="carousel-caption" >
                            <h3>Banner1</h3>
                            <p>sdfdsfhsdfjhsdkj</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="Image/test2.jpg"  class="img-responsive">
                        <div class="carousel-caption">
                            <h3>Banner2</h3>
                            <p>asdsdd dasdasdsad</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="Image/test4.jpg"  class="img-responsive">
                        <div class="carousel-caption">
                            <h3>Banner3</h3>
                            <p>asdasd asdasda asdsa</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    result:

    Best Regrads,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, July 15, 2019 1:58 AM