Возможно ли средствами css отобразить фото по размеру квадрата?

Рейтинг: 0Ответов: 3Опубликовано: 02.03.2015

Возможно ли средствами css отобразить фото по размеру квадрата?

css css3
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

* {
  padding: 0;
  margin: 0;
}
div {
  max-width: 300px;
}
div figure {
  padding-top: 100%;
  /* 300px/300px = 1 */
  display: block;
  background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
  background-size: cover;
}
<div>
  <figure></figure>
</div>

JsFiddle

▲ 2

Необходимо сделать изображение фоном к контейнеру квадратной формы:

div.square {
  width: 300px;
  /* ширина картинки */
  height: 300px;
  /* высота картинки */
  background-size: cover;
  background-position: center center;
}
<div class="square" style="background-image: url(_путь_к_вашему_изображению_);"></div>

Примерно как здесь

▲ 1

В css3 есть background-size если ему задать значение cover, изображение будет масштабироваться с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока. Ну и картинку делаем background'ом