ZorNet.Ru — сайт для вебмастера » HTML и CSS » Отцентрировать и обрезать изображение

Отцентрировать и обрезать изображение

При подготовке изображений для дальнейшей установки нужно, чтоб все корректно смотрелось, а значит отцентрировать и обрезать углы на картинке. Если подробнее, то на каждом сайте или другого ресурса есть блоки, которые предназначены под изображения квадратного типа или формы. А вот сами снимки идут неправильного размера, ведь по сути они бывают разные по своим формам.

И здесь при помощи этого очень простого трюка можно все исправить, и сделать так, что при установках картинки, все будет корректно смотреться. При этой техники мы задействуем преобразования CSS3, Плюс в том, что она работает во всех современных браузерах, включая IE9 и выше.

Обрезка, это процесс удаления частей картинок, чтобы создать фокус или усилить композицию, где является неразрушающим, и вы можете сохранить обрезанные пиксели, чтобы позже оптимизировать границы обрезки. В дополнение к базовой обрезке полей можно также обрезать изображения до определенных форм и соотношений сторон изображений внутри фигуры.

Приступаем к установке:

HTML

Код

CSS

Код

.obreska_snimka {
  position: relative;
  width: 215px;
  height: 215px;
  overflow: hidden;
}
.obreska_snimka img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.obreska_snimka img.painting {
  width: 100%;
  height: auto;
}

Это может быть полезно для вырезания ненужных элементов или линий по краям снимков или для подгонки изображения к новому соотношению сторон.

Демонстрация

28 Мая 2020 Загрузок: 2 Просмотров: 1333 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0