Topic: Control the width/height of images in the carousel

chronoviking free asked 3 years ago


For a website, I have users uploading images which will be displayed in a carousel.

<div class="row">
<div class="col-md-6">
    <div class="justify-content-center my-2 profile-pic w-100">
        <!--Carousel Wrapper-->
        <div id="carousel-example-1z" class="carousel slide carousel-fade" data-ride="carousel">
            ...
        </div>
        <!--/.Carousel Wrapper-->

    </div>
</div>
<div class="col-md-6">
    <div class="card border-primary my-2">
        <h5 class="card-header bg-primary">Information</h5>
        <div class="card-body">
            <div class="card-text">
                ...
            </div>
        </div>
    </div>
</div>

However, even though I am forcing the column with the images to a fixed height via CSS, the carousel images expand beyond the cell.

.profile-pic {
    height: 600px;
    border: solid 1px red;
}
.profile-pic img {
    max-width: 100%;
    max-height: 100%;
}

How can I still keep the images responsive but fit within the confines of the column?


Dawid Wajszczuk staff commented 3 years ago

Hi. Can you provide a snippet with some pictures that will illustrate your issue? It will help a lot. Thanks. https://mdbootstrap.com/snippets/



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.8.1
  • Device: Any
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No