Как сделать квадратные изображения?

Question

[lue merg]

Необходимо сделать квадратные изображения
P.S все изображения имеют разный размер как вертикальные так и горизонтальные если прописать одинаковую ширину и высоту картинка растягивается

<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set">
	<img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/>
</a>

Answer 1

[Stalker_RED]

Если пропорции не совпадают, то можно
1. растянуть
2. обрезать
3. повторять картинку
4. дополнить фоновым цветом/изображением.

Comments

[lue merg]

мне надо ее сделать как маску в фотошопе надеюсь ты понял

[lue merg]

а то что ты перечислил это все не красиво это ме

[Stalker_RED]

lue merg: Это вариант 2 - обрезать.
jsfiddle.net/Lqm08qtr

Answer 2

[Богдан Духевич]

Здесь в любом случае понадобится бекенд.

Как пример, можно определять ориентацию изображения и дальше от класса .horizontal или .vertical позиционировать через css (absolute, width/height: 100% - в зависимости от класса, left/top: 50% - в зависимости от класса, transform: translateX(-50%)/translateY(-50%) - тоже в зависимости от класса).
В таком случае оригинальные размеры изображения сохраняются (пользователь может его сохранить таким же).

Ну либо бекендом делать обычный crop.

Comments

[lue merg]

отличная идея спасибо огромное

Answer 3

[Natterum]

Используйте конструкцию типа:

<div style="overflow: hidden; width: %ваш размер%; height: %ваш размер%">
<img src="..." />
</div>

Это поможет уместить картинки любого размера в слое.
overflow: hidden - обязательный параметр.

Answer 4

[Денис Васильев]

А если картинке задать object-fit: cover;

Answer 5

[Александр Синицын]

Обычно делаю квадратный блок через padding-bottom: 100%; и вывожу изображение фоном с background-position: center; background-size: cover;

Answer 6

[zooks]

Грамотней всего обрезать через PHPthumb.