CODEWITHSUNDEEP
cssmedia-queriesretina-displayretina
Margate
Margate

Reputation: 421

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!

Upvotes: 1

Views: 1480

Answers (2)

Meg
Meg

Reputation: 1472

Your div is the right size for the image, but you also need to set a height & width for the image itself. Images don't scale by default. Try something like this: 

@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;
    }
    .retina-logo img{
       width: 100%;
       height: auto;
    }
}

Upvotes: 1

Ralph
Ralph

Reputation: 132

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.

Upvotes: 3

Related Questions