css for media queries and height issue - css

Question

I have an image background for a div that I want to show on different devices, The problem is that I have to give height of the image in order to fit it correctly. Now on different phones, I have to adjust the height with different px. forexample on iphones 65px works for portrait mode but not for landscape and etc. Is there a way that the div just gets resized in height to cover 100% of the background image?
here is my code
<style>
div.testing {
height: 95px;
background-image: url(/myimageurl);
background-repeat: no-repeat;
background-size: 100%;
}
#media screen and (max-width: 320px) {
/* iphone portrait */
div.testing {
height: 65px;
}
}
#media screen and (min-width: 321px) and (max-width: 480px) {
/* iphone portrait */
div.testing {
height: 80px;
}
}
</style>
<div class="testing"> </div>

Answer 1

You could 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 are you using a background-image? if you can use a regular image, you could do it like this:
.thing {
width: 100%;
max-width: [your biggest width];
}
.thing img {
display: inline-block;
width: 100%;
height: auto;
}
ALSO
I would recommend flipping your mindset on the max-width and start small screen first, using min-width and getting bigger.
And you don't really need div.testing - it can just be .testing
And if you are using a background image for a good reason... you should investigate making the div -
.thing {
height: 0;
padding-bottom: 30%; /* play with this */
}
This will keep the proportions... but it's only useful in specific cases.
A complete jsfiddle with an actual image would be useful.
Good luck!

Answer 2

Nest your div inside the background div and set the height to 100%