使分割图像响应

Question

我一直在制作响应式类背景中的图像。网站url。

如果您能帮助我，我正在使用 bootstrap 和 nivo 滑块，那将非常有帮助。 下面给出了我用于滑块的 css 和 html。

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

html:

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

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

以及上述代码在笔记本电脑上的截图（带有额外的 html ）：

这里是网站url。尝试在 380px 宽度以下查看它，因为这就是问题发生的时候。 我希望图像在小于 380 像素时正确可见。

我希望所有图像变小并位于中心并在 380 像素以下正确对齐，但我明白了：

.

如果你能帮助我，我将不胜感激

Answer 1

如果没有看到全貌，调试起来有点困难，但我认为你需要像下面的代码一样使用 max-widths。这将防止您的 div/图像变得比您想要的大，但会在必要时允许它们变小。

.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 2

绝对定位的元素需要放在浮动容器中才能响应移动。如果您将绝对容器放入浮动容器，移动内容将与屏幕外壳同步移动。我在我的一个项目中遇到了同样的问题 - 这是一个非常简单的解决方案。

笔： http://codepen.io/staypuftman/pen/tFhkz

请注意，粉红色的绝对定位元素会随着您调整屏幕大小而移动，同时与蓝色框保持一致。带有粉红色绝对定位元素的整个蓝色框将作为一个单元一起浮动到任何宽度。

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（背景颜色用于显示元素）：

.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 3

将nivo-slider.css中的css更改为：

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

到

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

Answer 4

我找到了答案。它是由用户发布给我的。所以如果其他人遇到任何麻烦，我会分享它：

“所以我发布了一个答案。

屏幕/视口宽度为 380 像素及以下的“问题”有几个问题。

在你的外部<div> 和slider-wrapper3 类（它是把iPhone 作为背景图像的那个）你应该在你的CSS 中使用以下内容：

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

至少为您的小屏幕布局移除宽度设置 (width: 310px;)！

通过这样做，您已经固定了容器（以及背景图像）的位置和大小。

所以您仍然需要调整图像大小（可能在滑块脚本中，或者图像尺寸的来源）。”

Answer 5

试试这个：

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