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

Try this:

@media(max-width: 380px) {
.nivoSlider{
position:relative;
width:94%;
height:378px;
top:85px;
bottom:0px;
left:8px;
overflow: hidden;
}

Answer 2

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

Answer 3

i found the answer.It was posted to me by a user.So I'm sharing it if anyone else gets into any trouble:

"So to not have all the things in the comments I post an answer.

The "problem" on screen-/ viewport widths of 380px and below has several issues.

On your outer <div> with the class slider-wrapper3 (it's the one which holds the iPhone as background image) you should use the following in your CSS:

.slider-wrapper3 {
   background-size: contain; /* you use cover */
   background-repeat: no-repeat;
   /* keep the rest of your actual code */
}

and remove the width setting (width: 310px;) at least for your small screen layout!

By doing so you have then fixed the position and size of the container (and also the background image).

So you still need to adjust the image sizes (probably in your slider script, or wherever the image's dimensions come from)."

Answer 4

Absolute positioned elements need to be put in a floated container to move responsively. The mobile content will move in sync with the screen shell if you put the absolute container into a floated one. I ran into this exact same problem on one of my projects - it's a surprisingly easy solution.

Pen: http://codepen.io/staypuftman/pen/tFhkz

Note the pink absolute positioned element moves as you resize the screen while staying inline with the blue box. The whole blue box with the pink absolutely positioned element inside will float together as unit to any width.

HTML:

  <div class="hero-background">  
    <div class="hero-text-area-container">
      <h3 class="hero-text-effects">Eaters: Find Your Favorite Food Truck</h3>
    </div>
    <div class="iphone-backdrop">
        <div class="hero-image-band-container"></div>
    </div>
  </div>

CSS (background colors are to show elements):

.hero-background {
background: #dedede;
height: 100%;
margin-top: 4em;
min-height: 20em;
min-width: 100%;
}

.hero-text-area-container {
background: #d6ffd1;
float: left;
margin: 0% 6%;
max-height: 25em;
padding-top: 11em;
position: relative;
vertical-align: middle;
width: 55%;
}

.hero-background .hero-text-area-container h3 {
background: #f7f7f2;
opacity: .8;
padding: 1em;
text-align: center;
}

.iphone-backdrop {
background: #d1e2ff;
float: left;
height: 120px;
max-width: 320px;
padding-top: 2em;
position: relative;
width: 100px;
}

.hero-image-band-container {
background: #ffd1d1;
height: 80px;
position: absolute;
width: 80px;
top: 13%;
left: 0;
bottom: 0;
right: 0;
}

Answer 5

Change the css in nivo-slider.css from:

.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%
}

To

.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;

/* now this is the important things for your problem */
    vertical-align: baseline !important;
    max-width: none !important;
}