WebDesign: Scaling Images for the Viewport / Screen
When images are the content that drives your site and you want to display them as big as possible for your users, make sure to scale them appropriately. A lot of sites have images as THE content, like photography blogs or fashion and lifestyle blogs.
What I usually enjoy most is when a site doesn’t tell me how to view the images, but just makes use of the scroll in the browser, just have them in a long column. The challenge with that is that you need to scale images differently when viewed on a vertical device such as a tablet or smart phone.
For gegenwind.dk we are trying to make sure that images fill the viewport as much as possible, while never being larger than it. Since we want to focus mainly on getting our content out, we don’t want to worry about what aspect ratio an image is in when we post it.
Pssst, check out our Travel Photography #3: Amsterdam post ;)
When designing image heavy sites, make sure to handle different image aspect ratios well, maybe have an example folder with images in at least:
- 4:3
- 3:4
- 16:9
- 9:16
available so you can check if any of that breaks your design.
The minimal lines of CSS we use for ensuring that our images scale either up to their maximum available size or the readers screen / viewport are:
img, iframe {
display: block;
max-width: 90%;
max-height: 90vh;
margin: 10px auto;
}
Another great example of a really amazing photography blog with a very minimalistic design is Severin Koller, where the black and white images are just surrounded by a tiny border on the black background. The blog might seem a bit dated, but you really can’t say that it distracts a lot from the images.