How to resize image according to screen resolution and aspect ratio

i have a image with a size 399 x 347 it fitting for resolution 800x600 i need to resize this image to fit for other resolutions such as 1024 x 768, 1280 x 720 , 1280 x 768, etc… how i can calculator the size of it and considerate that Aspect Ratio is changing 4:3 16:9 16:10 5:3 5:4 etc thanks

Hi,

You can’t change the aspect ratio of an image without distorting it.

You can make it responsive by setting the width of the image to 100% and it’s height to auto (in css) but you can’t magically make it change aspect ratio. :slight_smile:

If it’s a background image you can make the image cover a specified area but that means it will get cropped on one direction or the other. You can do similar for foreground images using object-fit:cover but is only supported in very modern browsers.

It sounds like you need to take a little time and learn about responsive design first as the techniques required apply to all your elements. Don’t think about fixed screen sizes as there are none. Screens are every size imaginable and you have to understand this concept fully so that you can cater for them accordingly :slight_smile:

5 Likes

thanks you

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.