Images and magnification

Question

My new computer has a 2880x1800 pixel resolution and a screen magnification of 175% - now what I notice on our corporate web page is that the company logo has become very pixelated. How can we "detect" with pure CSS or HTML to show a higher resolution logo when visitors have a high resultion screen and screen magnification? Must we rely on Javascript - and is it even possible to do this?

score 1 · Accepted Answer · edited May 23 '17 at 12:01

1

You could use this code:

<link rel="stylesheet" media="screen and (min-device-width: 1500px)" href="1500.css" />

which would only target devices with > 1500px horizontal resolution.

Detecting the browser zoom isn't so simple. I think this SO question adequately handles it.

edited May 23 '17 at 12:01

Community

1
1

answered Dec 23 '12 at 13:57

jamesplease

12,547
6
47
73

The SO link has a link to a JS library https://github.com/yonran/detect-zoom that seems useful, thanks. – Dec 23 '12 at 14:11

score 1 · Answer 2 · answered Dec 23 '12 at 14:03

It's not an easy problem to solve. You have several options. Here is Chris Coyier's roundup.

Personally, I would follow Dave Rupert's method of using an image that is about 1.5 times the size it is being displayed. It's certainly the easiest and sanest solution.

img {width: 200px; height: 200px;}

<img src="http://placehold.it/300x300" />

Demo

Images and magnification

2 Answers2