Как сделать отзывчивую сетку фотографий с помощью Twitter Bootstrap, если высоты разные

Как я могу щелкать изображения Bootstrap 3 'img-responsive', но позволяю им иметь заданную высоту, чтобы сетка фотографий перетекала (в отличие от нижнего изображения)?

Я попытался установить атрибут высоты изображения и атрибут max-height, но, похоже, игнорирует те, если я не установил его высоту с помощью "! important", но тогда они выглядят плохо и на самом деле не в сетке, потому что они принимают так мало горизонтального пространства.

Я пробовал несколько трюков, связанных с их помещением в качестве фоновых изображений divs, и overflow:hidden, но все, что я пробовал 1) не работает, и 2) кажется хакерским 3) выглядит испорченным. (в качестве примера пробовал этот)

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

Кажется, что это должно быть обычным явлением - есть ли несколько простой способ справиться с этим?

photo gallery

Ответы

Ответ 1

Я не знаком с загрузкой, но я уверен, что вы можете обернуть каждый img в div.wrapper, и примените что-то вроде этого к divs:

div.wrapper {
    width: 33%;
    height: 200px; /* or whatever... */
    overflow: hidden;
    float: left;
}

Затем для обработки масштабирования изображения:

.wrapper img {
    max-width: 100%;
    height: auto;
}

ИЗМЕНИТЬ - АЛЬТЕРНАТИВНЫЙ МЕТОД

Чтобы достичь желаемого, я думаю, что лучший способ - использовать фоновые изображения для альтернативного элемента с background-size: cover вместо тегов img.

HTML:

<a href="path/to/full_size.jpg" class="image" style="background-image: url(path/to/image.jpg);">Link Text Here</a>

Повторите для каждого из ваших изображений в сетке вместо использования тегов img.

CSS

.image {
    display: block;
    text-indent: -1000px; /* hide link text */
    overflow: hidden;
    background-size: cover;
    width: 33%;
    height: 200px;
    float: left;
}

Обратите внимание, что размер фона не поддерживается в версиях IE 8 и ниже, если это имеет к вам значение.

Ответ 2

В Bootstrap есть 3 общих подхода к выравниванию/высоте сетки

CSS подходит только для этого.

http://bootply.com/85737

Подход "clearfix" подобен этому (требуется итерация каждые x столбцов).

http://bootply.com/89910

Наконец, вы можете использовать плагин Isotope или Masonry. Вот рабочий пример, который использует Isotope + Bootstrap 3:

http://bootply.com/109446

Подробнее о выпуске Bootstrap

Ответ 3

Никто еще не предложил обрезать, поэтому я брошу свои 2 цента.

Я бы использовал предопределенную ширину x height в сетчатой ​​версии изображений с более крупной нерегулярной версией. На самом деле, даже если более крупная версия не была нерегулярной, я бы, вероятно, все еще это сделал. Основная разметка все равно будет сеткой, будь то Foundation, Bootstrap, что угодно.

Таким образом, вы всегда можете ссылаться на большой/оригинальный размер и использовать сетку или уменьшенные изображения, если это необходимо. Для статического сайта я сделал бы это вручную, для динамического сайта я бы использовал процессор изображений, который автоматически меняет разные стили, например. example.com/image-styles/thumb/photo.jpg.

Очевидно, что разные изображения нужно обрезать по-разному, но если вам не важно, где происходит урожай, вы можете просто установить изображение внутри div и overflow: hidden; всего: http://jsfiddle.net/785gN/

Недостатком этого является то, что вы считаете, что все изображения квадратные или ландшафтные, а не портрет (или наоборот). Альтернативно, используйте фоновое изображение с background-size: cover;, как было предложено.