locked
Carousel image is not responsive to height inside @renderbody RRS feed

  • Question

  • User-1355965324 posted

    I am trying to make the height of  carousel image  to reduce bit further, but when I reduce the height of the image, some part of the image is disappeared.  How can I make it fully visible  as responsive ,  even if I reduce the height.

    I have 1. Layout page, 2.  Index page , css file

    // Layout
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - MyCompany</title>
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    
    </head>
    
    <body>
        <div class="container-fluid icon-top py-4 px-5">
            <div class="row">
                <div class="col d-flex justify-content-between align-items-baseline ">
                    <div class="top-icons">
                        <a href="#" class="mx-2"><i class="fab fa-facebook"></i></a><a href="#" class="mx-2"><i
                                class="fab fa-twitter"></i></a><a href="#" class="mx-2"><i
                                class="fab fa-instagram"></i></a><a href="#" class="mx-2"><i class="fab fa-linkedin"></i>
                        </a>
                    </div>
                </div>
            </div>
    
        </div>
        <header id="header">
            <nav class="navbar  navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark">
                <div class="container">
                    <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MyCompany</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="navbar-collapse collapse">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item active">
                                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">About Us</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Our Project</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Contact</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>
    
        <div class="body-container">
            @RenderBody()
        </div>
    
        <footer class="border-top footer text-muted">
            <div class="container" id>
                &copy; 2021 - MyCompany - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
            </div>
        </footer>
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
        <script src="~/js/all.js"></script>
        @await RenderSectionAsync("Scripts", required: false)
    </body>
    
    </html>
    
    //Index page
    @{
        ViewData["Title"] = "Home Page";
    }
    <section id="home-heading">
        <div class="container-fluid p-0">
            <div id="MyCarousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item carousel-image-1 img-fluid active">
                        <img class="d-block w-100 img-fluid">
                    </div>
                    <div class="carousel-item  carousel-image-2">
                        <img class="d-block w-100 img-fluid">
                    </div>
                    <div class="carousel-item carousel-image-3">
                        <img class="d-block w-100 img-fluid">
                    </div>
                </div>
                <a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    
    
    </section>
    css file
    
    #body-container {
        /*  */
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
    }
    html {
        ;
        min-height: 100%;
    }
    
    body {
        /* Margin bottom by footer height */
        margin-bottom: 60px;
    }
    
    .footer {
        bottom: 0;
        width: 100%;
        white-space: nowrap;
        line-height: 60px;
        /* Vertically center the text there */
    }
    
    .icon-top {
        background-color: chocolate;
    }
    
    .navbar .nav-link {
        font-size: 14px !important;
        text-align: right !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .navbar .nav-item.active {
        border-left: #444 3px solid;
    }
    
    .carousel-item {
        height: 800px;
    }
    
    .carousel-image-1 {
        background: url('../img/banner-1.jpeg');
        background-size: cover;
    }
    
    .carousel-image-2 {
        background: url('../img/banner-2.jpeg');
        background-size: cover;
    }
    
    .carousel-image-3 {
        background: url('../img/banner-3.jpeg');
        background-size: cover;
    }

    Please can you help to make the carousel image responsive to height ?

    Thanks

    Pol

    Monday, May 3, 2021 1:46 PM

All replies

  • User-474980206 posted

    remove the w-100 from 

    <img class="d-block w-100 img-fluid">

    so the image can be responsive. you will need to wrap the image in a div w-100 for the carousel. as the image will not be full width, use a nice background.

    Monday, May 3, 2021 4:53 PM