Currently, I am working on project cards and using materialize css's image card to style them. One of the features that I particularly like is how it resizes the picture when included inside a container. This allows me to set a fixed height without worrying about the resolution of the image getting distorted.
One thing that has piqued my curiosity is how the image overflows outside the container but isn't visible beyond its borders. I would like to understand this better as I find sizing images responsively and keeping them aligned quite challenging...
For reference, here is an image of overflow
<div class='row'>
<div class="project-card col s12 m12 l4">
<div class="card hoverable large">
<div class="card-image">
<img class='project-img' src="images/drake.PNG" alt="project1">
<span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Drake API</span>
</div>
<div class='card-body'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
</div>
<div class='project-link'>
<a href='https://github.com/Jay-Trades/Drake-API'>Project</a>
<a href='https://github.com/Jay-Trades/Drake-API'>Code</a>
</div>
</div>
</div>
<div class="project-card col s12 m12 l4">
<div class="edit card hoverable large">
<div class="card-image">
<img class='project-img' src="images/dogmeet.png" alt="project1">
<span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Dog Meet</span>
</div>
<div class='card-body'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
</div>
<div class='project-link'>
<a href='https://jay-trades.github.io/Dog-Meet/'>Project</a>
<a href='https://github.com/Jay-Trades/Dog-Meet'>Code</a>
</div>
</div>
</div>