smackdown000
New Member
I've got an image of a map on a web page.Using CSS, the map image is automatically cropped by the browser. The goal is that the map is always at 100% scale, and is centred on the location in question. The idea being that the map will always fill the width of the page, but as size of the browser window shrinks, the surrounding area is simply cropped, but the location pin is always visible, and always at 100% scale.I've got this working fine with non-retina images using a div:\[code\]#map { width: 100%; height: 300px; background-image: url('images/map_1.jpg'); background-position: center; background-size: auto;}\[/code\]The problem I'm having with retina devices is that it is either be at "true" 100% (so it's twice as big) AND cropped (using \[code\]background-size: auto;\[/code\]), OR at full width (using \[code\]background-size: 100%;\[/code\]), which means the map features are often tiny.I've got a media query to detect hiDPI devices, but I can't figure out how to get it to maintain the appropriate scale AND crop/hide the overflow.thanks