How to properly set up a responsive image according to psd layout?

Question

css

Hello, I've been struggling with the correct setting of the background image for an hour already. Should I
take a full photo from psd or a cropped one like on the layout?
If I take the full one, then it’s not the same, and also with a truncated one
Please help please
Link
https://yadi.sk/d/kfUn1JM73P8R3U

Answer 1

A similar problem occurs when the aspect ratio changes depending on the viewing mode (window width) - for example, in widescreen mode, the picture is 2:1, and in portrait 1:1, or even the height is greater than the width.
To display such an adaptive image, ideally, you need to prepare several options for the image, for different viewing modes, and show the desired image depending on the media query in css.

Answer 2

And what prevents you from taking the full and background-position positioning it? If you take a cropped one, then you need to stretch it and the quality will drop.