Why my img is not responsive?

Could you please help me why my img is not responsive. When i make the screen smaller a kind of padding appears on the bottom of the img. So my breakpoint is higher than this “issue” . How can I fix this? I tried height: auto etc, nothing helps.
Here are my full codes. Change the breakpoint smaller to get this problem. Thank you in advance:

I’m actually not seeing the issue, so maybe it’s just the browser that isn’t applying styles correctly when you resize?

Hi, Thank you for looking at my codes.

Did you change the breakpoint to (for example:) 800px?
Thank you in advance.

The image will maintain its aspect ratio given the space it has. If it didn’t it would get squeezed or stretched.

You can give it a height and use object-fit. If you want to use 100% height you have to propagate it down from the .article element.

2 Likes

Thank you
The height 100% on .article and the object -fit on img did not help on this. will practice it per your linked article.

When I say propagate down I mean all the way down to the element. So on .article and all its descendants.

.article,
.article * {
  height: 100%;
}

img {
  object-fit: cover;
}

I think :thinking: your image is fully responsive from what I discovered when I reduced your CSS media query break point to 575px.

I think :thinking: the issue is caused by the contents (texts) within the

<article> tags

What happens is that when you resize the viewport to smaller screen size, the image and article element resize accordingly, but the contents (text) of article is not resizing; the font-size of the text is fixed.
This causes the article element to grow (increase in height) thereby creating a padding-like space at the bottom of the image.

To the best of my CSS knowledge, I think :thinking: you should use these CSS functions below:

min() or max()

On the h1 and other texts within the article. The above functions will enable the browser to calculate the available space and resize the texts accordingly.

I have included some links that will teach you how to use the CSS functions above, in case you have not used them before.

  1. https://youtu.be/U9VF-4euyRo by Kevin Powell

  2. freeCodeCamp Learn Accessibility By Building a Quiz. The above CSS functions was used on the freeCodeCamp logo and h1 of the app.

  3. min(), max(), and clamp(): three logical CSS functions to use today from web.dev

These are assumptions from my little observation. Though I cloned your repo., I didn’t test the functions, I will do that some other time when I am free.

Also, I would like to point out that your current media query break point is to much for you current design. Reduce it to somewhere close to 650px.

I am sorry :pray: for the lengthy epistle :sweat_smile: :joy:
Happy coding…

1 Like

Thank you for your help.
Thats work, perfectly.
The reason why i need to add height:100% as the .article and the descendants had no set of height, they were auto so they did not reach 100% by default because of the content which is the image?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.