Cannot get .css to scale correctly in Firefox orChromium

HTML-CSS
1

Hello FreeCode Community, I am try to add images to my first website, and have come across an issue that I have never seen before and cannot figure out a fix for, even after 8 hours of searching Stack Overflow, Google, and many other places. The image is placed where I want it in both fully open browsers, but when I reduce the windows, the image does not scale properly. On Firefox it scales correctly left to right, but rises in the window to obscure the text. On Chromium, it stays where it should, but the left and right sides get cut off, evenly. I am totally at a loss on this. Any help you may provide would be greatly appreciated.
Thank you in advance.

HTML:


 `<div class="img-container"><img src="jag2.png" alt="silk cut jaguar"></div>`

CSS:

.img-container { 
    display: flex;   
    margin-top: -20em;
    justify-content: center;
}

Screenshot from 2020-11-04 08-34-17
Screenshot from 2020-11-04 08-34-171920×1080 807 KB

2

You’ll need to provide us with a link to your actual code so we can look at the whole thing. There is not enough information here to provide you with a good answer.

1 Like
3

Thank you, I will try to set up a CodePen link. I think I am trying to take this on a little too early in my coding journey. I appreciate your response.

4

Try adding:

.img-container img {
  height: 100%;
  width: 100%;
}