Image Card with equal height

Topic: Image Card with equal height

peter.stein free asked 8 years ago

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

Add comment

Michal Szymanski staff answered 8 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:

<pre><code> 
            <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>
            </code></pre>

CSS code:

<pre><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;
        }</code></pre>

Please insert min. 20 characters.

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;
        }

Add comment

hotbelgo free answered 8 years ago

1 0 Best answer

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

Add comment

Michal Szymanski staff answered 8 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Specification of the issue

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: Yes

peter.stein

0Support score
1Questions 0Answers 0Snippets