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

Question

[Иван Шашков]

Задал изображениям пропорции с помощью

.modelsOut__item::after {
		content: '';
		display: block;
		padding-top: 100%;
	}

но они не квадратные, можете помочь?

Answer 1

[Ankhena]

По-хорошему, псевдоэлементы ::before и ::after бывают только у парных тегов (несмотря на то, что браузеры могут пытаться что-то там изобразить и порою даже успешно)
Нужно обернуть каждую картинку в оберточку и по ней заполнять картинку, можно с использованием object-fit

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

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

Comments

[Иван Шашков]

За align-content: start спасибо!

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

[Ankhena]

Иван Шашков, правильный вариант - с обертками для img.
https://jsfiddle.net/Ankhena/cLhxv7eq/
В примере внутри div, у вас будет картинка с object-fit