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

chronoviking free asked 2 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">
        <!--/.Carousel Wrapper-->

<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">

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 2 years ago

Hi. Can you provide a snippet with some pictures that will illustrate your issue? It will help a lot. Thanks.

Please insert min. 20 characters.


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



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