Разметка
Стили
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%;
}
Свежие комментарии