I seem to be facing an issue with the code snippet provided. The intention is for the image to fit neatly inside the card with some padding around the edges, but it seems to overflow the parent div instead.
Snippet:
<div class="card greeting">
<h3>Good Morning, admin</h3>
<p class = "greeting-text">Mornings are the start of new ideas.</p>
<img src = "<?php echo ASSETS_PATH . 'images/park.png' ?>">
</div>
.card {
border-radius: var(--border-radius);
background-color: var(--page-background-color);
box-shadow: var(--box-shadow);
cursor: pointer;
padding: 8px;
margin: 13px 0;
border: 2px solid transparent;
transition: .3s;
color: var(--font-color);
object-fit: contain;
}
.greeting{
background-repeat: no-repeat;
background-position: right;
background-size: 55px;
padding:10px;
}
.greeting img{
background-repeat: no-repeat;
background-position: right;
background-size: 55px;
padding:10px;
}
.greeting .greeting-text{
word-wrap: break-word;
overflow:hidden;
}
Is there a straightforward solution to address this issue? My objective is to ensure that the image fits nicely within the card.
I have attempted utilizing object-fit:contain and other methods, but it appears that either I haven't implemented them correctly or there might be another underlying problem.