Make image responsive across all devices

Question

I have a carousel in my webpage where i am trying to make it responsive across all the devices.

My css declaration for 3 different devices so defined height accordingly as 350px, 255px,125px

.banner{
    max-width:100% !important;
    background:url(http://xxx/images/slide4.jpg) no-repeat;
    min-height:350px;
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    -ms-background-size:cover;
}
.banner{
    min-height:255px;
    max-width:100% !important;
    background:url(http://xxx/images/slide4.jpg) no-repeat;
}
.banner{
    min-height:125px;
    max-width:100% !important;
    background:url(http://xxx/images/slide4.jpg) no-repeat;
    }

My html code :

<div class="banner">                    </div>

Please advise how can i make my image to fit across all the devices. Thanks in Advance.

Possible duplicate of [Make an image responsive - simplest way](http://stackoverflow.com/questions/15458650/make-an-image-responsive-simplest-way) — lyndact, Nov 13 '15 at 03:31
I would use different images for each media type, so your Browser doesn't have to vector scale. That and the [@media](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) rule. — StackSlave, Nov 13 '15 at 03:39

score 1 · Answer 1 · answered Nov 13 '15 at 04:24

The way you've created your CSS it's cascading to the last rule you list so you'll always get a min-height of 125px. You need to split your rules up into media queries. @media (min-width: 320px) { .banner { min-height: 125px}} This way as your viewport size changes the rules will apply at the media 'breakpoints' you provide.

score 0 · Answer 2 · answered Nov 13 '15 at 05:19

Width: 100% will break it when you view on a wider are.

Following is Bootstrap's img-responsive

max-width: 100%; 
display:block; 
height: auto;

This is how you should write media queries

@media (min-width: 480px) { //for mobile devices 
  .banner {
    min-height: 125px
   }
}

@media (min-width: 768px) { // for tablets
  .banner {
    min-height: 255px
   }
}

Make image responsive across all devices

2 Answers2