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

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

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

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

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

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

HTML

Код
<div class="obreska_snimka">  
  <img src="http://zornet.ru/_fr/56/3302384.jpg" alt="Ключевое слово" />
</div>
<div class="obreska_snimka">  
  <img src="http://zornet.ru/_fr/56/3302384.jpg" class="painting" alt="Ключавая фраза" />
</div>

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;
}

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

Демонстрация
2020-05-28 Загрузок: 1 Просмотров: 272 Комментарий: (0)

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

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

Оставь свой отзыв

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