Aspect Ratios Explained: Why Your Images Look Stretched
You resize an image to fit a container and it looks wrong. The photo is distorted. People's faces are too wide or too narrow. The landscape that looked stunning at full size now looks like it was s...

Source: DEV Community
You resize an image to fit a container and it looks wrong. The photo is distorted. People's faces are too wide or too narrow. The landscape that looked stunning at full size now looks like it was shot through a funhouse mirror. The problem is almost always the same: you changed the dimensions without preserving the aspect ratio. Aspect ratio is the proportional relationship between width and height. It's one of those concepts that's simple in theory and surprisingly tricky in practice, especially when you're dealing with responsive layouts, multiple screen sizes, and media from different sources. What aspect ratio actually means An aspect ratio is expressed as two numbers separated by a colon: width:height. A 16:9 image is 16 units wide for every 9 units tall. The actual pixel dimensions don't matter -- 1920x1080, 1280x720, and 3840x2160 are all 16:9 because the ratio simplifies to the same proportion. To calculate the aspect ratio from pixel dimensions, find the greatest common diviso