Make division image responsive

问题

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 slider. The css and the html that i am using for the slider are given below.

The css:

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

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

The html:

    <div class="slider-wrapper ">
    <div id="slider" class="nivoSlider">

    <img src=""  />
    <img src=""  />
    </div>
    </div>

And a screenshot of the above code (with additional html ) on a laptop:

Here is the website url. Try viewing it below 380px width as that's when the problem occurs. I want the image to be visible properly at less than 380px.

I want the all the images to become smaller and be in the center and properly aligned below 380px but i get this:

.

I would be more than thankful if you could help me out

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

回答2:

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

回答3:

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

回答4:

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)."

回答5:

Try this:

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

来源：https://stackoverflow.com/questions/21853803/make-division-image-responsive