CODEWITHSUNDEEP
htmlcssresponsive-design
Kinimod
Kinimod

Reputation: 166

Responsive Header Image CSS

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;
    }
}

Upvotes: 3

Views: 2526

Answers (2)

Marco Dal Zovo
Marco Dal Zovo

Reputation: 378

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.

Upvotes: 1

Samudrala Ramu
Samudrala Ramu

Reputation: 2106

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"/>

Upvotes: 0

Related Questions