Как сделать responsive блок в форме квадрата?

Question

[Александр Решетняк]

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

Answer 1

[DTX]

www.mademyday.de/css-height-equals-width-with-pure...

Answer 2

[Cyber_bober]

если не принципиально, можете запихнуть изображение в блок как

background:url('pathToImg') 50% 50% / cover;

задать блоку высоту и ширину нужные и изображение будет масштабироваться

Answer 3

[GreatRash]

Адаптивный или всё-таки отзывчивый?

Comments

[Дмитрий Евграфович]

Вы какую палочку твикса выбираете?

[GreatRash]

Дмитрий Евграфович: Если проводить аналогии с шоколадками, то это сникерс и баунти.

[Сергей delphinpro]

маразм перфекционистов, желающих разложить всё по полочкам. Адаптивный сайт - сайт адекватно отображающийся (подстраивающийся под размер вьюпорта) на всём спектре устройств. Такого определения вполне достаточно.

[GreatRash]

Сергей: Никакого маразма. Просто видимо вы ниасилили прочитать статью.

[Сергей delphinpro]

GreatRash: Осилил и не одну подобную статью. Терминология надуманная.

[Сергей delphinpro]

Клиент приходит и говорит - сделайте мне адаптив. Или еще проще - пусть мой сайт с мобильников нормально открывается. И нахрен ему не вперлись ваши тонкости в терминах.