Images are getting cut off when the website is viewed in a small screen

Question

I have a problem where my images are getting cut off when the height or the width is decreased. I need to make it responsive so I it isn't helping.

I have tried to use media queries but its still not working.

Code - Github
Sample Website - GitHub Pages

Thanks.

Answer 1

It appears the problem is due to the inconstant aspect ratio of the height and width of the images. In the case of the mouse and the gruffalo, both the width and height are set to a percentage of the display resolution. The aspect ratio of the display is typically different compared to the aspect ratio of the images. To fix this, one of the attributes (width or height) should be set to auto in order to take in account the aspect resolution of the images.

The problem with the mouse and the gruffalo can be solved like this.

section #mouse {
    top: 38%;
    left: 10%;
    height: 30%;
    width: auto;
    z-index: 10;
}
section #gruffalo {
    top: 41%;
    left: 75%;
    height: 30%;
    width: auto;
}

The code below fixes the issue of the images being cut off by maintaining aspect ratio.

I hope this response has been of help.

Best regards,