Responsive Header Image CSS - html

Question

How can I set an image as header which is responsive?
I've tried already the Bootstrap's img-responsive class, but the height is to large on small screens.
I've tried this, but the image has each time the original size:
#media (max-height: 700px){
.img-theme {
display: block;
width:auto;
max-width:100%;
height:250px;
}
}
/* sm */
#media (min-height: 701) {
.img-theme {
display: block;
width:auto;
max-width:100%;
height:275px;
}
}
/* md */
#media (min-height: 999px) {
.img-theme {
display: block;
width:auto;
max-width:100%;
height:400px;
}
}
/* lg */
#media (min-height: 1200px) {
.img-theme {
display: block;
width: auto;
max-width:100%;
height:500px;
}
}

Answer 1

Try this:
.img-theme{
width: 100%;
height: auto;
max-heigth: 500px !important;
}
This should auto-resize height based on width, 100% make the image responsive of device screen width. And your image won't be taller than 500 pixels.
Here is an example:
body{
margin: 0;
}
.img-theme{
width: 100%;
height: auto;
max-height: 500px !important;
}
<img class="img-theme" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-5.jpg">
You don't need to use media-queries... just place it in your global css file.

Answer 2

Don't Use Width:auto width always 100%; in any resolution now its working fine check it once
#media (max-height: 700px){
.img-theme {
display: block;
width:100%;
height:250px;
}
}
/* sm */
#media (min-height: 701) {
.img-theme {
display: block;
width:100%;
height:275px;
}
}
/* md */
#media (min-height: 999px) {
.img-theme {
display: block;
width:100%;
height:400px;
}
}
/* lg */
#media (min-height: 1200px) {
.img-theme {
display: block;
width: 100%;
height:500px;
}
}
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-5.jpg" class="img-theme"/>