css3 - css for media queries and height issue -

i have image background div want show on different devices, problem have give height of image in order fit correctly. on different phones, have adjust height different px. forexample on iphones 65px works portrait mode not landscape , etc. there way div gets resized in height cover 100% of background image? here code

<style>     div.testing {         height: 95px;         background-image: url(/myimageurl);         background-repeat: no-repeat;         background-size: 100%;     }     @media screen , (max-width: 320px) {         /* iphone portrait */         div.testing {             height: 65px;         }     }     @media screen , (min-width: 321px) , (max-width: 480px) {         /* iphone portrait */         div.testing {             height: 80px;         }     }    </style>      <div class="testing">&nbsp;</div> 

you use background-size: cover;

.thing {   background: url(images/bg.jpg) no-repeat center center fixed;    -webkit-background-size: cover;   -moz-background-size: cover;   -o-background-size: cover;   background-size: cover; } 

but why using background-image? if can use regular image, this:

.thing {     width: 100%;     max-width: [your biggest width]; }  .thing img {     display: inline-block;     width: 100%;     height: auto; } 

also

i recommend flipping mindset on max-width , start small screen first, using min-width , getting bigger.

and don't need div.testing - can .testing

and if using background image reason... should investigate making div -

.thing {      height: 0;     padding-bottom: 30%; /* play */ } 

this keep proportions... it's useful in specific cases.

a complete jsfiddle actual image useful.

good luck!