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）在笔记本电脑上：

enter image description here

这是网站url。尝试在380px宽度下查看问题时的问题。我希望图像在低于380px时正确显示。

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

enter image description here

如果你能帮助我，我会非常感激

Answer 1

在没有看到整个画面的情况下调试有点困难，但我认为你需要使用像下面的代码那样的最大宽度。这样可以防止你的div / images变得比你想要的更大，但是如果需要的话可以让它们更小。

.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

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

“所以我没有在评论中找到所有内容，我发布了答案。

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

在您的外<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;
}

使分区图像响应

5 个答案: