Авторазмер JQuery для нескольких изображений

0

Я хочу, чтобы изображения увеличивались, когда я расширяю окно, а когда пространство для другого - это будет плюс одна строка...

Предположим, я открываю страницу HTML с помощью:

image1 image2 image3
image4 image5 image6
image5 image6 image7

если я разворачиваю окно, изображения будут увеличиваться, а затем я получаю 4 изображения (или больше) в строке:

image1 image2 image3 image4
image5 image6 image7

и если я уменьшусь, у меня будет обратное действие, например:

image1 image2
image3 image4
image5 image6
image7

Что-то вроде этого: http://pixelgrade.com/demos/lens/

Я ценю любую помощь :)

  • 0
    Я рекомендую изучить "адаптивный дизайн". Существует несколько CSS и JavaScript-фреймворков (таких как Bootstrap и Foundation ( foundation.zurb.com )), которые могут быть полезны.
  • 0
    Определенно посмотрите на ответ Данко, нет необходимости в JS.
Теги:

2 ответа

2
Лучший ответ

Вы можете дать этим изображениям некоторые из этих свойств css

img {
  float:left;
  /*or*/
  display:inline-block;
}

Просмотрите этот демо- поплавок или встроенный блок

В ответном размере вы можете использовать медиа-запросы, но вам нужно знать, сколько изображений вы хотите видеть в каждом размере браузеров. Как 1000px к 1200px 3 изображения в строке и под 1000px только два изображения.

Новый демонстрационный ответный размер

Поделиться
  • 0
    Да, изображения правильные, но есть проблема, предположим, у меня есть div ширина 350px и 3 изображения шириной 100px каждое, у меня будет 50px без изображения, и дело в том, что я хочу, чтобы изображения увеличивали или уменьшали свой размер и автоматическая настройка, как они делают с приставками css, которые вы мне дали, но без места для заполнения. Это главная идея: pixelgrade.com/demos/lens
  • 0
    Посмотрите новый код с таким, что вы можете сделать это
Показать ещё 1 комментарий
0

Почему бы вам просто не заглянуть в их CSS файл? Это не минимизировано :) http://bit.ly/16v64Vo

Оттуда вы можете обнаружить, что мы используем сетчатую систему и на основе разрешения изменяем количество изображений в строке.

Добавьте к каждому изображению класс (например, mosaic__item), а затем присвойте им другую ширину, используя запрос @media:

@media only screen and (min-width: 1201px) {
    .mosaic__item {
      width: 33.33333%; 
    } 
}

@media only screen and (min-width: 901px) {
   .mosaic__item {
      width: 50%; 
   } 
}
@media only screen and (min-width: 600px) {
   .mosaic__item {
      width: 100%; 
   } 
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню