Как в слайдере сделать так, чтобы высота равнялась ширине?

Question

[towncitybr]

тоесть итемы были квадратные
https://jsfiddle.net/n7ug5k1h/

Comments

[Ankhena]

Гуглить "css всегда квадратный блок" или "css пропорции блока хак с паддингом'. Или ждать aspect-ratio.
Этот вопрос тут уже тысячу раз был.

[towncitybr]

Ankhena, так то оно так , но со слайдером не видел, разница всё-таки есть
может я не прав, извините

вот так как вариант? не перемудрил?
https://jsfiddle.net/82s4bafv/1/

[Ankhena]

towncitybr, левый и правый паддинги у .work__item лишние.
В современном мире абсолюты заменяются на гриды, а паддинг 100% задается псевдоэлементу

[Антон Литвиненко]

Ankhena, привет, а какая разница элементу или псевдоэлементу задавать?

[Ankhena]

Антон Литвиненко, если задавать элементу, то нужен абсолют. Если псевдо, то без абсолюта можно обойтись с помощью гридов.

[Антон Литвиненко]

Ankhena, чем плох в данном случае абсолют? Как на меня вкусовщина, я вот гриды например ещё не использовал

[Ankhena]

Антон Литвиненко, не, я спросонья ерунду сморозила. Абсолют всё равно нужен.
Но оберток будет меньше.
https://jsfiddle.net/vwka7bn6/

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

Answer 1

[Антон Литвиненко]

.swiper-slide {
	height: 0;
	position: relative;
	padding-top: 100%;
}

.swiper-slide img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

Comments

[Антон Литвиненко]

Только по хорошему я бы сделал ещё обертку внутри swiper-slide и уже ей это задавал