CODEWITHSUNDEEP
javascriptphphtmlcss
Saibalu
Saibalu

Reputation: 113

Make image responsive across all devices

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.

Upvotes: 1

Views: 908

Answers (2)

Jinu Kurian
Jinu Kurian

Reputation: 9416

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

Upvotes: 0

cijanzen
cijanzen

Reputation: 19

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.

Upvotes: 1

Related Questions