图像被裁剪

Question

I have an image that gets cropped when I set the background size to cover but it is not wide enough if i change the background size to contain. I have specific width and height I just can't seem to find a solution for it to not get cropped.

.hard-case-container {
background-image: url(/images/HARDCASE.png);
height: 536px;
width: 648px;
border-radius: 25px;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: space-around;

Answer 1

Firstly, you're missing a closing bracket in your CSS.

Secondly, if you have a landscape image you want to fit in your potrait screen, then this will not work. Same goes for the other way around.

You will always have to find a compromise - either cut some part of the image or let some part of the image be white (or another background color set).

If you force your image to fit the screen, it will look drawn out.