Image Card with equal height


Topic: Image Card with equal height

peter.stein asked 9 years ago

Hi, Please help, how can I get the same height for the cards, even if the images have different size: example

hotbelgo answered 9 years ago

How could I do this if I'm OK with pictures being cut?

Michal Szymanski staff pro premium priority answered 9 years ago

You have to set an ID or Class to your element and then set a background to it via css. Example with Image Card:
 <!--Image Card-->
            <div class="card hoverable">
                <div class="card-image">
                    <div class="view overlay hm-white-slight z-depth-1">
                        <div id="yourElement"></div>
                        <a href="#">
                            <div class="mask waves-effect"></div>
                        </a>
                    </div>
                </div>
                <div class="card-content">
                    <h5>Card title</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id amet, quisquam modi nobis nostrum iusto incidunt dolore assumenda delectus officia quia, sequi eum perspiciatis architecto. Ullam voluptatum, facere nihil quidem.</p>
                </div>
            </div>
            <!--Image Card-->
CSS code:
#yourElement {
            background: url("http://mdbootstrap.com/images/proffesions/reg/coach/img%20(1).jpg") no-repeat center center;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            height: 300px;
        }

Michal Szymanski staff pro premium priority answered 9 years ago

You can set an image as a background for <div class="card-image"> via CSS. But then you risk your picture will be cut or stretched. The best way is to prepare your images before using it.
Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags