Please help me...!

HTML-CSS
1

Hello friends!
Can somebody help me please fit this image inside its container and also make it responsive?
Thanks
here is the link: https://codepen.io/mike5485/pen/poeJONa?editors=0010

2

In your media query, you have set the width of container as ‘70%’ but you have not set any such restrictions on your image. you can use the same trick to make your image responsive which you have used to make the container responsive. Right now, as the size of screen reduces, width of container gets decreased in the same ratio but the image width remains fixed causing it to overflow the container.

3

Thanks for your quick reply. But I want the image to cover the all container. I also see when the screen is decreasing the contain moves outside the container. Can you help me please with it? Thanks again…!

4

Hi removing the padding and margin bottom on container could help
also set container width to 600px and image width100% ;
I hope this help?

1 Like
5

Remove padding inside container and why set width to 80% if you want it to cover 100% of the container?

Secondly, if you want the image to cover container fully in all situations, that isn’t a good choice in my opinion as to achieve that, we will have to force the resize to fit the container and that could look bad.

6

contain moves outside the container because you have hardcoded it to have a margin of 50% from top and left. As the width decreases and height increases, it is pushed below to have a top margin of 50%.

7

See, you can do one thing. Remove all elements. Keep one contain element. On contain element, you have have your image as background image and then display contain insider as

display: grid;
place-items: center

Instead of having image element inside container, use it as background-image on contain element.

8

Thanks so much friends

9

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