I have a situation where I can\'t possibly know the dimensions of an image (a proprietary limited cms...)
I need to figure out how to show a retina level image, and
You can do this trick: output all images and show only relevant images to each device:
HTML markup:
CSS styles:
.logo_retina { display: none; }
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.logo_normal { display: none; }
.logo_retina { display: block; }
}
Also you can use this ‘adaptive images’ solution and read about adaptive images saga on html5doctor
UPDATE: dabblet link
HTML:
BRAND
CSS:
#logo a {
display: block;
width: 200px;
height: 200px;
background: url('//placekitten.com/200');
}
@media (-webkit-min-device-pixel-ratio:1.5),
(min--moz-device-pixel-ratio:1.5),
(-o-min-device-pixel-ratio:3/2),
(min-resolution:1.5dppx) {
#logo a {
background: url('//placekitten.com/400');
}
}