css - Retina Graphics displaying too big? -

css - Retina Graphics displaying too big? -

i have made 2 images: 1 normal display (350px x 43px), , other retina (700px x 86px). using code below works supposed regarding changing images out hi-res.jpg beingness displayed @ actual size of 700px x 86px? totally new retina graphics , hence have no thought right way prepare this. both images should within of div 350px wide , 43px high!

i thought happening on retina display there many more pixels per inch , larger image hence needed. have made larger image how contain within div , display properly?

@media screen , (-webkit-min-device-pixel-ratio: 1.5), screen , (min--moz-device-pixel-ratio: 1.5), screen , (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 much help. have been trying sorts of css prepare this!

what add together height="..." , height value of smallest size

example: want image of 400px x 400px;

create & utilize file @ double size (800px) this:

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

i have macbook pro retina , method works great. utilize @2x javascript (google it). automatically switches right image.

hope help.

css media-queries retina-display retina