每行6個圖像，無論圖像大小調整的屏幕大小 - html css3

即時通訊試圖實現兩行圖像（即第一行6個圖像和第二行6個圖像）。當我的屏幕尺寸在320像素和480像素之間時，它提供了我的要求。但是，我無法調整其他屏幕。每行6個圖像，無論圖像大小調整的屏幕大小 - html css3

請看看這個鏈接在這裏：sample html page

我已經在這裏發現了一個類似的問題 - >stackoverflow qs

然而，這是一個不同的實現。理想情況下，我希望兩行圖像保持原樣，但當屏幕尺寸增大時，圖像的大小應該變大。

任何提示/想法或資源來實施這種解決方案將不勝感激。

謝謝！

來源

2015-07-21 cssnewbie

如果你希望它們總是6行，爲什麼不只是'ul> li> ul> li * 6'？ – 3zzy

讓我嘗試並再次回覆。 – cssnewbie

我不完全確定你的問題，如果你的代碼提供了一些有用的代碼。無論如何，我會去這樣做這樣的事情：

CSS

#image { 
    min-width: 320px; /*Sets a width of 320px*/ 
    width: 16.66%; /*If page gets bigger the image will become 1/6 of page's width*/ 
}

所以基本上，設置min-width，並在那之後將其設置爲你想要多少百分比的頁面的它是。 width將僅當min-width爲真時才使用。

編輯

我才意識到我的答案是怎麼樣的完全錯誤的（疲勞是一個因素）。以在考慮下面的例子：

HTML

<div id="holder"> 
    <image class="image" src=""> 
    <image class="image" src=""> 
    <image class="image" src=""> 
    <image class="image" src=""> 
    <image class="image" src=""> 
    <image class="image" src=""> 
</div>

CSS

#holder { 
    min-width: 320px; 
    width: 100%; 
} 

.image { 
    width: 16.66%; 
    position: relative; 
}

簡單地說，這是什麼會做的是使6張圖片一起具有320px的最小寬度。現在，如果屏幕尺寸小於320px，則保存圖像的項目#holder將會離開頁面。然而，如果頁面比320px大，那麼圖像將分別取的寬度的16.66%（1/6），它是頁面寬度的1/6。所以有了這兩個組合的值，你可以做到這一點，圖像會擴大，但永遠不會變小。

來源

2015-07-21 02:37:52

你的意思是最小寬度將適用於網頁？當我的網頁屏幕大小超過320px時，寬度百分比值會被應用？這對我來說是新的。讓我試試 – cssnewbie

你好，抱歉我去睡覺了。現在我正確閱讀這些內容，讓我重寫我的答案。 –

它現在對我更有意義。你可以檢查此鏈接 - > http://responsivetest.net/#u=davidtompsalmist.com/fixedresponsive.html|1280|800|1.5林不知道爲什麼邊界沒有覆蓋內的圖像。 – cssnewbie

#sortable li { 
    float: left; 
    background: #fff; 
    vertical-align: top; 
    box-shadow: 0 0 5px #ddd; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
#sortable li:nth-child(6n+1) { 
    clear: left; 
}

來源

2015-07-21 02:45:29 3zzy

新的東西里第n個孩子。讓我試試這個。 – cssnewbie

也許這將幫助

*{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.wrapper > div { 
 
    background: #737373; 
 
    float: left; 
 
    position: relative; 
 
    width: 16.66666666666667%; 
 
    padding-bottom: 16.66666666666667%;   
 
} 
 
.wrapper > div img { 
 
    position: absolute; top: 0; left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="wrapper"> 
 
<div> 
 
    <img src="http://g02.a.alicdn.com/kf/HTB1LApRIXXXXXcAXXXXq6xXFXXXC/Car-Stereo-GPS-Navigation-for-Mazda-6-2002-2008-Auto-Radio-DVD-Player-Multimedia-Head-Unit.jpg" alt="" /> 
 
</div> 
 
<div> 
 
    <img src="https://static.artfire.com/uploads/product/2/592/71592/8271592/8271592/large/380_auto_nickel_bullet_push_pins_-_set_of_4_807a34be.jpg" alt="" /> 
 
</div> 
 
<div> 
 
    <img src="http://www.steptwo.cz/media/catalog/product/d/e/detska-postel-auto-corvette-821500-c.jpg" alt="" /> 
 
</div> 
 
<div> 
 
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTi6yvNhbL_qWDmf0CqCjObIKLOEV8KobtxeYsNPnk0tynHaer0xw" alt="" /> 
 
</div> 
 
<div> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ_WGLGUhf-E74PgPVnISsV2RkX4ahN-jhF7UpOghGmyrI8iTn_bw" alt="" /> 
 
</div> 
 
<div> 
 
    <img src="http://g02.a.alicdn.com/kf/HTB1LApRIXXXXXcAXXXXq6xXFXXXC/Car-Stereo-GPS-Navigation-for-Mazda-6-2002-2008-Auto-Radio-DVD-Player-Multimedia-Head-Unit.jpg" alt="" /> 
 
</div> 
 
    
 
<div> 
 
    <img src="http://g02.a.alicdn.com/kf/HTB1LApRIXXXXXcAXXXXq6xXFXXXC/Car-Stereo-GPS-Navigation-for-Mazda-6-2002-2008-Auto-Radio-DVD-Player-Multimedia-Head-Unit.jpg" alt="" /> 
 
</div> 
 
<div> 
 
    <img src="https://static.artfire.com/uploads/product/2/592/71592/8271592/8271592/large/380_auto_nickel_bullet_push_pins_-_set_of_4_807a34be.jpg" alt="" /> 
 
</div> 
 
<div> 
 
    <img src="http://www.steptwo.cz/media/catalog/product/d/e/detska-postel-auto-corvette-821500-c.jpg" alt="" /> 
 
</div> 
 
<div> 
 
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTi6yvNhbL_qWDmf0CqCjObIKLOEV8KobtxeYsNPnk0tynHaer0xw" alt="" /> 
 
</div> 
 
<div> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ_WGLGUhf-E74PgPVnISsV2RkX4ahN-jhF7UpOghGmyrI8iTn_bw" alt="" /> 
 
</div> 
 
<div> 
 
    <img src="http://g02.a.alicdn.com/kf/HTB1LApRIXXXXXcAXXXXq6xXFXXXC/Car-Stereo-GPS-Navigation-for-Mazda-6-2002-2008-Auto-Radio-DVD-Player-Multimedia-Head-Unit.jpg" alt="" /> 
 
</div>  
 
</div>

Fiddle

來源

2015-07-21 02:46:05 Dmitriy

我測試你的榜樣。非常感謝您的精力和時間。一旦我完成測試後我會再回復。 – cssnewbie

如果我給的500像素的高度藍色的包裝類和背景它看起來不錯。當我調整，我們如何調整包裝遵循的形象呢？ – cssnewbie

當我給寬度值包裝器，圖像調整大小不會發生..如果我想換什麼我的包裝內的兩行圖像通過給我的包裝一些寬度，因爲我不希望兩行圖像佔用，直到我的網頁的角落。 – cssnewbie

隨着角材料的彎曲性能幫手（fiddle demo）：

<style> 
    .image-container{ 
    height: 200px; 
    background-size: cover; 
    } 
    .image-container{ 
    background-image: url(http://placehold.it/#abc/300x600) 
    } 
</style> 
<div layout="row" id="slides-container"> 
    <div flex="33" class="one-third" layout="row"> 
    <div flex="50" class="one-sixth image-container"> </div> 
    <div flex="50" class="one-sixth image-container"> </div> 
    </div> 
    <div flex="33" class="one-third" layout="row"> 
    <div flex="50" class="one-sixth image-container"> </div> 
    <div flex="50" class="one-sixth image-container"> </div> 
    </div> 
    <div flex="33" class="one-third" layout="row"> 
    <div flex="50" class="one-sixth image-container"> </div> 
    <div flex="50" class="one-sixth image-container"> </div> 
    </div> 
</div>

來源

2015-07-21 03:25:25 Plato

每行6個圖像，無論圖像大小調整的屏幕大小 - html css3

回答

相關問題