Question

I have a question pertaining to ruby on rails. I was wondering if there is a way to set aspect ratios for different monitor sizes for images used on a page. Thanks for any help.

Answer 1

To set aspect ratios for the different monitor sizes for images used in the pages :

1) Responsivity & Images

- One safe solution for including images in your layouts is using a fix aspect ratio, e.g. for many years Instagram only allowed users to upload square images with a 1:1 aspect ratio and your photo grid screen still contains square images, it crops anything that is not a square.

2) Art direction

- Usually it’s handled by dynamic cropping — but what happens if the most important part of the image is off-center, e.g. if the rule of thirds was applied, and the subject of the image is placed at the intersection points nearer to the left or right side of the picture? In these cases, dynamic cropping might crop out the main subject. A possible solution is that you can identify focal points, and there are tools that include for instance face detection. So you can either address this issue by manually setting focal points, or there are solutions for automatic art direction (this is the specific term for this activity).

3) Screen resolution and pixel density

- A screen resolution refers to the number of pixels: how many pixels are displayed horizontally and vertically. Now, pixel density [Pixels per inch (PPI)] tells you how many pixels are displayed within a given area of the screen.

eg :

4) Raster and bitmap images

- Until this point I mainly talked about raster or bitmap images. You surely know the difference between raster and vector images, to put it really simply, vector images are based on mathematical calculations, so these are infinitely scalable. On the other hand, raster images are made of pixels, and not scalable infinitely. Also, a vector file has a smaller file size, so it’s better for performance. A commonly used format is SVG, that is stands for Scalable Vector Graphics. So in case of a logo, icons, illustrations you should apply SVGs, these are great for all screen resolutions and pixel densities.

5) Textual content and videos

- It is a good practice to specify a maximum length for each textual element. Other aspects include typographic choices, like fonts, font sizes, spacing. And in many cases, the textual content itself is also different for different viewport sizes, for example you might want to display only some short paragraphs on a mobile device, while on larger viewport sizes you might want to include longer stories.