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.

CodePudding user response：

This because you have defined a height, width, and object-fit: cover for your images. Your height and width are both percentages of the window size so they will not always match the aspect ratio of the image. object-fit: cover means that if the height and width of an image do not match the image's aspect ratio, it will scale to the larger of the two and cut off the ends of the image that do not fit.

In order to prevent the images being cut off, you will need to either

• eliminate object-fit: cover, or
• eliminate either the height or width variable (so that the other one will be automatically determined)

CodePudding user response：

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,

CodePudding user response：

I think the problem in this css:

section #mouse {
    top: 38%;
    left: 10%;
    height: 30%;
    width: 15%;
    z-index: 10;
}

when you set width 15% the image will be cut when width is decreased. the same reason for height... Using percentage in height or width will make it cut.

I think you can use object-fit: contain; and object-position: center; in this image css and convert one of width or height to max-width or max-height. The same thing for #gruffalo