使分割圖像響應

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