Search code examples
cssmedia-queriesretina-displayretina

Retina Graphics displaying too big?

I have made two images: one for normal display (350px x 43px), and the other for retina (700px x 86px). Using the code below everything works as it is supposed to regarding changing the images out but hi-res.jpg is being displayed at his actual size of 700px x 86px? I am totally new to retina graphics and therefore have no idea the correct way to fix this. Both images should be inside of a div that is 350px wide and 43px high!

I thought what was happening is that on a retina display there are so many more pixels per inch and a larger image is therefore needed. I have made a larger image but how do I contain it inside a div and get it to display properly?

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
    .retina-logo{
        display: block;
        text-align: center; 
        max-height: 43px; 
        max-width: 350px; 
        margin-top: 15px;
    }
}

HTML

<div class="logo"><img src="elements/logo.jpg"></img></div>
<div class="retina-logo"><img src="elements/hi-res-logo.jpg"></img></div>

Thank you very much for any help. I have been trying all sorts of css to fix this!

Solution

  • What I always do is add height="..." and then the height value of the smallest size

    Example: You want an image of 400px x 400px;

    Create & use file at double size (800px) Then do something like this:

    < img src="./img/pathto/.jpg" height="400">

    I have a Macbook Pro Retina and this method works great. You could also use the @2x javascript (Google it). This automatically switches to the right image.

    Hope this will help.