Topic: Image Card with equal height
peter.stein asked 9 years ago
hotbelgo answered 9 years ago
Michal Szymanski staff pro premium priority answered 9 years ago
<!--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
<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. FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes