Make division image responsive

Question

I am stuck in making images inside background of a class responsive.The website url .

It would be very helpful if you could help me out i am using bootstrap and nivo

Answer 1

It's a little hard to debug without seeing the whole picture, but I think you need to be using max-widths like the code below. This will prevent your divs/images from becoming larger than you want, but will allow them to be smaller if necessary.

.slider-wrapper { 
     max-width: 310px; 
     max-height: 650px;
     background: url("images/iPhone.png") center center ;
     background-size:cover;
    }

    .nivoSlider {
      position:relative;
      max-width:290px;
      max-height:512px;
      top:60px;
      bottom:65px;
      left:23px;
      right:24px;
      overflow: hidden;
    }
    .nivoSlider img {
      position:absolute;
      top:0px;
      left:0px;
      max-width:100%;
      height: auto;
    }