div { /* Блок обертки картинки */ width: 20%; /* Тут ширина ваша, высота будет считаться на хаке ниже */ position: relative; /* Это обязательно */ /* Временные стили*/ background-color: #eee; margin: 30px auto; } div:before { /* Хак формирования соотношения сторон для квадрата 1:1, исходя из ширины */ content: ""; display: block; padding-bottom: 100%; } img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: auto; display: inline-block; width: auto; min-width: 1px; max-width: 100%; height: initial; min-height: 1px; max-height: 100%; }
Как все изображения сделать квадратными?
с
нет комментариев