Адаптивный квадрат (квадратное изображение) на HTML+CSS

27 окт1 комм Артём Мáлков

Смею предположить, что вам доводилось видеть сайты, на которых в ряд выстроено несколько квадратных элементов. Это может быть сетка изображений по типу галереи, или, например, последние события (новости). На компьютере (условно, я называю это ПК-версией сайта) вид выглядит как задумано (квадратные элементы выглядят как положено), как, например, немного уменьшив экран (изменив тем самым ширину сайта), мы видим уже не квадраты, а прямоугольники, в которых, опять же, например, обрезана часть контента (люди на изображении, текст и прочее), и мы получаем в итоге не совсем правильную картину (результат). Примеры и ситуации могут быть разными, и если раньше эта задача решалась у меня добавлением в CSS медиазапросов под разные экраны, то сейчас я подошёл к вопросу более «лениво» (то есть универсально).

Без лишних слов, HTML:

<div class="square">
      
	Ваш контент
    
</div>

И CSS-правила для него:

.square {
	color: #fff; /* Правило по необходимости */
	background-color: black; /* Правило по необходимости */
	overflow: hidden;
}

.square:before {
	content: "";
	padding-top: 100%;
	float: left;
}

Ширина (и, соответственно, высота) квадрата будет зависеть от ширины родителя. Чтобы регулировать размеры фигуры, ограничьте ширину родителя или ширину самого квадрата через свойство «max-width»:

.square {
	color: #fff;
	background-color: black;
	overflow: hidden;
	max-width: 150px; /* Максимальная ширина */
}

В комментариях к этому посту вы найдёте пару примеров того, как можно использовать данный адаптивный квадрат в веб-проектах.

.square { overflow: hidden; position: relative; } .square:before { content: ""; padding-top: 100%; float: left; } .square__img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }

комментарий

Форма комментирования этого поста скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.

- 2
1084
Артём Мáлков • Команда Pandoge
изменено 27 окт в 14:08
Как и писал ранее – два примера того, как можно задействовать данный элемент в вашем проекте.
Первый вариант – это фоновое изображение. Для этого главному классу .square из поста (не псевдоэлементу :before) пропишите следующие правила:
background-image: url("Путь до изображения"); background-repeat: no-repeat; background-size: cover; background-position: center;
Второй вариант – вставка изображения через тег IMG с подгонкой (вписыванием) в квадрат.
HTML:
<div class="square"> <img src="Путь до изображения" alt="" class="square__img"> </div>
CSS:
.square { overflow: hidden; position: relative; } .square:before { content: ""; padding-top: 100%; float: left; } .square__img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }