6 изображений на строку независимо от размера экрана с настройкой размера изображения - html css3

Question

im пытается достичь двух строк изображений (то есть 6 изображений в первой строке и 6 изображений во втором ряду). Когда мой размер экрана составляет от 320 пикселей до 480 пикселей, это дает мое требование. Однако я не могу настроить другие экраны.

Пожалуйста, обратите внимание на эту ссылку здесь: sample html page

я нашел подобный вопрос здесь ->stackoverflow qs

Однако это другая реализация. В идеале, я хотел бы, чтобы две строки изображений оставались такими, какими они есть, но размер изображения должен увеличиваться при увеличении размера экрана.

Любые советы/идеи или ресурсы для реализации такого решения будут оценены.

Спасибо!

Answer 1

Я не совсем уверен в вашем вопросе, и если вы кодируете код, который поможет. Во всяком случае я бы идти о делать что-то вроде этого:

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 это правда.

EDIT

Я просто понял, как мой ответ был вид совершенно неправильно (Усталость был фактор). Полюбуйтесь на счет на следующий пример:

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 , Теперь, если размер экрана становится SMALLER, чем 320px, #holder, элемент, который держит изображения, затем покинет страницу. Тем не менее, если страница становится БОЛЬШОЙ, чем 320px, тогда изображения будут отображать 16.66% (1/6) ширины #holder, что составляет 1/6 ширины страницы. Итак, с этими двумя комбинированными значениями вы можете сделать так, чтобы изображения расширялись, но никогда не становились меньше.

Answer 2

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

Answer 3

может быть, это поможет

*{ 
 
    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

Answer 4

со шлейфом вспомогательных свойств углового материала (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>