使分割图像响应

Question

我被困在一个类的响应背景内的图像。网站​​。

这将是非常有帮助的，如果你可以帮助我我使用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）：

这里是网站​​。尝试在380像素宽度以下查看它，这是问题发生时的情况。 我希望图像在380像素以下能够正常显示。

我希望所有的图像变得更小，并在中央和下方380px正确对齐，但我得到这样的：

。

我会比感激更多，如果你能帮助我

Answer 1

我找到了答案。它是由用户发布给我的。对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 2

这是一个有点难以调试没有看到全貌，但我认为你需要使用MAX-宽度如下面的代码。这可以防止你的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 3

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

笔： 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 4

变化从在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 5

试试这个：？

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