What is the most simple and effective way to prvent images from flowing out of their parent

Question

I am having some trouble with the code below. What is supposed to happen is the image rests neatly inside the card with some padding around the edges. Instead, it flows out of the parent div.

Code:

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

What would be a simple solution for this? My goal is to have the image neatly inside the card.

I have tried object-fit:contain and other solutions but either I didn't do them correctly, or something else is wrong.

Overflow hidden on parent. Don't have time now but consider checking if this has already been answered. — T04435, Nov 20 '20 at 02:39
https://stackoverflow.com/questions/4888223/align-image-in-center-and-middle-within-div/18830421 — T04435, Nov 20 '20 at 03:04

score 0 · Answer 1 · edited Nov 20 '20 at 02:35

0

Don't think too much, you are not giving image as a background image, so need to use background properties

.greeting img {
  max-width: 100%;
  height: auto;
}

edited Nov 20 '20 at 02:35

Dharman

30,962
25
85
135

answered Nov 20 '20 at 02:29

Manikanta Reddy

849
9
23

It still is flowing out of the parent div `.card` – PhoenixCMS Nov 20 '20 at 02:30
Here you are: https://codepen.io/balFB373/pen/RwRmqrK – PhoenixCMS Nov 20 '20 at 02:39
remove height in your styles for the card it will enable full height image – Manikanta Reddy Nov 20 '20 at 03:08
for the parent `.card`? – PhoenixCMS Nov 20 '20 at 03:12

score 0 · Answer 2 · edited Nov 20 '20 at 13:43

0

I faced a similar situation. One of the effective method is to use

<div class="container">

this helped me out. https://www.w3schools.com/w3css/w3css_containers.asp Check out this article.

edited Nov 20 '20 at 13:43

Dharman

30,962
25
85
135

answered Nov 20 '20 at 03:42

mocha_nirvana

39
4

What is the most simple and effective way to prvent images from flowing out of their parent

2 Answers2