Кто как решает проблему красивого отображения фотографий, галерей на сайте?

Question

[Николай]

Как пропорционально (чтобы не было вытянуто или приплюснуто) вставлять фотографии на страницы сайта. Структура обычно на списках внутри li>a>img. Лучшему комментатору скину на кофе.

Answer 1

[Владимир]

Что нужно то ? Если нужно чтобы картинка подгонялась по ширине а высота уменьшалась пропорционально -
width: 100% height: auto
если зафиксирована высота - наоборот
предварительно у a - display: block или inline-block и задать высоту, ширину

Comments

[Ankhena]

Николай: Покажите Ваш код в песочнице (например, jsfiddle.net) и опишите, чем указанное в ответе не соответствует "как нужно".

[Николай]

Ankhena W: Жду мастер-класс, https://codepen.io/Nickolyashka/pen/MoZqqz

[Артём]

Николай: https://codepen.io/anon/pen/gRZdVG

[Николай]

Артём: https://codepen.io/Nickolyashka/pen/mwazpx и ничего

[Владимир]

Николай: https://codepen.io/anon/pen/PjXyBy

[Николай]

Владимир: 4 изображение не соответствует требованиям) Ребят, вопрос четко сформулировал, чтобы фотографии были все одного размера и не тянулись и не сжимались. Если нет решения, то проходите мимо. То , что вы предлагаете сейчас использую, но нужно что-то другое.

[Владимир]

Николай: Ну так напрягись, возмьми фотошоп и покажи чего хочешь. "не тянулись и не сжимались" понятие растяжимое. Я так понимаю тебе нужно подогнать фотографии к одному размеру при єтом не нарушая пропорций самой фотографии. Если понимать твое требование буквально, получается бред, чтобы фотографии, у которых изначально разный размер, сдлать одинаковыми нужно их или растянуть или сжать, но сделать это можно с сохранением пропорций или без или обрезать.

[koanvl]

У вас изображения разные в песочнице. Как они могут быть одинаковыми? Как квадрат может быть по размеру такой как прямоугольник? Тут или квадрат растягивать до прямоугольника, или прямоугольник резать до квадрата. Разница в размерах роли не играет.

[Ankhena]

Николай:

и ничего

Если исходные изображения разных пропорций, то при одинаковой ширине, у них будет разная высота либо они будут растянуты/сжаты.

Альтернатива: Обрезать с помощью overflow:hidden у родителя: https://codepen.io/anon/pen/PjXVQB

Можно разместить по центру с помощью позиционирования.

Если за зоной обрезки окажется половина лица, то я не виновата :)

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

Answer 2

[Ольга Ветер]

для a, в случае такой разметки, установлю display: block; и необходимые размеры, фиксированные или в % по ситуации, к img - width: 100%; height: 100%; object-fit: cover; Смотря насколько одинаковые фото, может использоваться для img и height: auto;

Comments

[Ольга Ветер]

Да на здоровье, рада, если помогло. Я безвозмездно :)