Xaski
@Xaski
Учусь в фронтенд

Почему не ставятся пропорции у изображений?



Задал изображениям пропорции с помощью
.modelsOut__item::after {
		content: '';
		display: block;
		padding-top: 100%;
	}
но они не квадратные, можете помочь?
  • Вопрос задан
  • 151 просмотр
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
По-хорошему, псевдоэлементы ::before и ::after бывают только у парных тегов (несмотря на то, что браузеры могут пытаться что-то там изобразить и порою даже успешно)
Нужно обернуть каждую картинку в оберточку и по ней заполнять картинку, можно с использованием object-fit

И вашего варианта:
Ширина
Как интересно вы считаете, 4 раза по 25% и еще между ними отступы по 3%. Вы планировали всё это уместить в 100%? Не выйдет.
Ещё вы туда же добавляете границы.
Чтобы ширина границ считалась "внутрь" используйте box-sizing: border-box

Высота
По умолчанию flex растягивает "строки" (при flex-direction row) и высоту элементов в них.
Чтобы он перестал это делать, нужно задать align-content: start
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы