Помощь в настройке фотогалереи CSS

Question

Я пробовал пример фотогалереи CSS здесь , чтобы настроить свой собственный ( здесь код ).Все работает отлично, за исключением:

(1) Div устанавливаются с использованием абсолютных мер в px.Я расстраиваюсь из-за необходимости изменять размеры и адаптировать мои фотографии, чтобы соответствовать им.Вместо этого есть способ настроить все размеры галереи (через CSS), например, в% или em, чтобы галерея адаптировалась к изображениям, которые я в нее вставил, а также динамически соответствовала размеру области просмотрабраузер?

(2) Я пытался добавить свои собственные фотографии в галерею, но если размеры моих фотографий не совпадают с размерами div, они переполняются.Есть ли способ указать большие изображения, чтобы изменить их размеры, чтобы заполнить их контейнеры, и сохранить их пропорции?

Спасибо.

Answer 1

(1) Я бы не стал настраивать всю галерею в% или масштабировать ее динамически, чтобы она подходила для браузера. Это может привести к неожиданным результатам и проблемам. Чтобы поместить изображения в элементы div, вы можете установить скрипт bash с imagemagick, чтобы изменить размеры всех ваших изображений. (Пусть даже ваш сервер может сделать это за вас. Если вы работаете в Windows, существуют программы для пакетного изменения размеров изображений, такие как Shrink-O-Matic .)

(2) Вы можете просто установить фиксированную высоту или ширину (только одну из них), чтобы поместить изображение в фиксированный размер. Затем браузер пропорционально масштабирует изображение, чтобы соответствовать этому значению CSS будет выглядеть так:

#container .pics span img {height: 400px;}

Это должно сработать.

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

Удачи.