vue-salt-rim
vue-salt-rim copied to clipboard
Improve recipe layout with smaller image
When viewing a recipe on almost any device I find that the image takes up the entire screen, I have to scroll down to even see the rest of the image, never mind the ingredients and steps. Could the image possibly be resized and placed to the side so the text can be seen without scrolling?
Additionally:
- default EMPTY image takes up 98% of my screen
- maybe no image should just not render an image? Seems like the obvious default
- images are blown up and stretched, regardless of original size
- I only expect an image to be shrunk to a maximum size, so a super high resolution photo does not overtake the whole page
- small images should not be made bigger, that just makes them ugly
- images are forced into a square aspect ratio
- I expect the ratio to stay how I uploaded it. If I wanted it square, I would crop it
Including a screenshot when I full screen on my 3440x1440 monitor of a cocktail with no image:
And a screenshot of a cocktail with a small rectangular photo (original, and the recipe page to see it in context, resized from 800x1100 to 500x688) zoomed, stretched, and cropped to square aspect ratio: