Я пытаюсь создать адаптивный веб-сайт, и мне нужно создать домашнюю страницу с 6 изображениями в 2 строки (по 3 изображения в строке), эти изображения скользят друг под другом, когда вы уменьшаете экран.

Пример того, над чем я работаю, можно увидеть на: http://www.mijncreaties.com/opstal/

Когда вы уменьшаете экран, вы видите, как изображения скользят под ними одно за другим. Но как раз перед тем, как изображение скользит под изображение рядом с ним, справа есть небольшой промежуток (потому что все они выровнены по левому краю).

Изображения имеют ширину 330 пикселей, максимальная ширина страницы - 1000 пикселей. Когда вы делаете страницу меньше 990 пикселей (скажем, 980 пикселей), изображение справа скользит под остальными. Но это оставляет зазор между 320 пикселей. Слишком маленький, чтобы изображение было видно, но достаточно большой, чтобы его можно было заметить. Если два изображения слева выровнять по центру, это немного восполнит пробел.

Полная ширина:

[image] [image] [image]
[image] [image] [image]

Меньшие

[image] [image]-small gap-
[image] [image]-small gap- 
[image] [image]-small gap-

Наименьший

[image]-small gap-
[image]-small gap-
[image]-small gap-
[image]-small gap-
[image]-small gap-
[image]-small gap-

Можно ли сделать так, чтобы изображения всегда располагались по центру страницы, но все равно скользили друг под другом при уменьшении экрана?

Пример того, как это может выглядеть:

| [image] [image]      |
| [image] [image]      |

Хотелось бы, чтобы вот так: (центрирование)

|   [image] [image]    |
|   [image] [image]    |

Или возможно: (немного растянув)

| [ image ] [ image ]  |
| [ image ] [ image ]  |

Я пробовал display: block; margin-left: auto; margin-right: auto;, но при этом все изображения помещаются друг под другом, даже если страница имеет максимальную ширину.

Если кто-нибудь может дать мне рабочий пример способа, который заставляет изображения сжиматься и увеличиваться до определенного размера при изменении размера окна, это тоже может сработать. Пожалуйста, посмотрите блоки социальных сетей ниже на главной странице (я просто не знаю, как они это делают ...)

Текущий код:

<a href="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg" alt="feesten" width="330" height="220" class="alignnone size-full wp-image-931" srcset="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/feesten-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg" alt="trouwen" width="330" height="220" class="alignnone size-full wp-image-933" srcset="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg" alt="catering" width="330" height="220" class="alignnone size-full wp-image-929" srcset="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/catering-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg" alt="condoleance" width="330" height="220" class="alignnone size-full wp-image-930" srcset="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg" alt="zaalhuur" width="330" height="220" class="alignnone size-full wp-image-934" srcset="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a><a href="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg" class="borderit"><img src="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg" alt="fotos" width="330" height="220" class="alignnone size-full wp-image-932" srcset="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/fotos-1-300x200.jpg 300w" sizes="(max-width: 330px) 100vw, 330px"></a>

CSS:

img.size-full, img.size-large {
    max-width: 100%;
    height: auto;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
    margin-bottom: 18px;
}
0
Vinnie Van Rooij 8 Сен 2016 в 10:35

4 ответа

Лучший ответ

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

.wrapper { display:flex; flex-direction:row; flex-wrap:wrap; }
.wrapper > a { display:block; width:33.333333%; text-align:center; }
.wrapper img { display:block; margin:auto; }


@media (max-width: 990px) {
  .wrapper > a { width:50%; }
}


@media (max-width: 660px) {
  .wrapper > a { width:100%; }
}
<div class="wrapper">
<a href="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg" class="borderit">
  <img src="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg" alt="feesten" width="330" height="220" class="alignnone size-full wp-image-931" srcset="http://www.mijncreaties.com/opstal/files/2012/09/feesten-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/feesten-1-300x200.jpg 300w"
  sizes="(max-width: 330px) 100vw, 330px">
</a>
<a href="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg" class="borderit">
  <img src="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg" alt="trouwen" width="330" height="220" class="alignnone size-full wp-image-933" srcset="http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/trouwen-1-300x200.jpg 300w"
  sizes="(max-width: 330px) 100vw, 330px">
</a>
<a href="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg" class="borderit">
  <img src="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg" alt="catering" width="330" height="220" class="alignnone size-full wp-image-929" srcset="http://www.mijncreaties.com/opstal/files/2012/09/catering-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/catering-1-300x200.jpg 300w"
  sizes="(max-width: 330px) 100vw, 330px">
</a>
<a href="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg" class="borderit">
  <img src="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg" alt="condoleance" width="330" height="220" class="alignnone size-full wp-image-930" srcset="http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/condoleance-1-300x200.jpg 300w"
  sizes="(max-width: 330px) 100vw, 330px">
</a>
<a href="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg" class="borderit">
  <img src="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg" alt="zaalhuur" width="330" height="220" class="alignnone size-full wp-image-934" srcset="http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/zaalhuur-1-300x200.jpg 300w"
  sizes="(max-width: 330px) 100vw, 330px">
</a>
<a href="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg" class="borderit">
  <img src="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg" alt="fotos" width="330" height="220" class="alignnone size-full wp-image-932" srcset="http://www.mijncreaties.com/opstal/files/2012/09/fotos-1.jpg 330w, http://www.mijncreaties.com/opstal/files/2012/09/fotos-1-300x200.jpg 300w"
  sizes="(max-width: 330px) 100vw, 330px">
</a>
  </div>

Если вы хотите, чтобы они меняли размер вместе со страницей - просто удалите атрибуты размера с фактического изображения и измените ширину на процентную (например, добавьте width:100%; к .wrapper img в стилях выше)

1
Pete 8 Сен 2016 в 07:52

Для этой цели вы можете использовать фреймворк начальной загрузки, в противном случае вам понадобятся медиа-запросы для адаптивного макета. вот ссылка http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

1
rmarif 8 Сен 2016 в 07:39

Попробуйте использовать Bootstrap. Bootstrap - идеальный инструмент для создания адаптивного дизайна. С их Grid вы можете довольно легко создавать петухов. Попробуйте создать изображения, как описано в ссылке, с помощью div с классом col-md-4

Что-то типа:

<div class="row"> <div class="col-md-4">[image]</div <div class="col-md-4">[image]</div> <div class="col-md-4">[image]</div> </div

Если вы новичок в Bootstrap. Чтобы начать, перейдите по этой ссылке. Все, что вам нужно сделать, это добавить 3 строки под заголовком Bootstrap CDN, и вы готовы к работе.

1
Taacoo 8 Сен 2016 в 07:39

Используйте систему сеток Bootstrap. Это упростит создание дизайна для экрана любого размера. (маленький (мобильный) средний (планшеты) и большой (мониторы)). Используйте контейнер, затем создайте строки внутри, а затем используйте столбцы для размещения изображений внутри.

<div class = 'container'>
 <div class = 'row'>
  <div class='col-xx-xx'> 'Your images go here' </div>
</div>

Первый xx указывает размер экрана. Например: lg, md, sm, xs. Второй указывает номер столбца. Теперь, используете ли вы жидкость для контейнера или простой контейнер, это зависит от вашего стиля. Для справки используйте документацию Bootstrap. Это просто и понятно:

http://getbootstrap.com/css/

http://getbootstrap.com/2.3.2/scaffolding.html

1
Bolshoi Booze 8 Сен 2016 в 07:52