CSS – как обрезать изображение без изменения пропорций


При подготовке изображений для Web нередко появляется необходимость обрезать их, чтобы выделить нужные части изображения и отсечь ненадобные. Не считая чисто художественных суждений, такая обрезка либо, как ее еще именуют, кадрирование, нужна для уменьшения объема файла. Чем меньше изображение, тем меньше объем его файла, и тем резвее оно загружается на web страничку.

Нередко возникает надобность заключать изображения в блок зафиксированного объема. В предоставленном случае возникает неувязка: как записать картину в блок в отсутствии утраты соотношения.
Естественно, разрешено отрезать и масштабировать рисунки по прибавления их на интернет-сайт либо кадрировать на серверном языке (к примеру PHP), а разрешено изготовить некоторый “аналог” на обычный CSS. В предоставленном случае, отрезка станет проистекать сообразно вертикали. То имеется, сообразно ширине картина станет проникать вполне, а сообразно вышине обрезаться.

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

<style>
  .img {
    display: inline-block;
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 5px solid #FFFFFF;
    background: #FFFFFF;
    outline: 1px solid #CCCCCC;
    margin: 10px;
  }
  .img img {
    width: 200px;
    border: none;
    margin: 0;
    padding: 0;
  }
</style>
<div class="img">
  <img src="/img/artkiev.png" alt="">
</div>

Оригинал:

Что получилось:

Обменник валют

Другие публикации:



Написать комментарий через:

 
               
  • Локальный блог
  •  
 

Ваш отзыв

Имя *

Почта (скрыта) *

Сайт

Напишите цифрами двa вoceмь двa *

Сообщение

Отзывов (3) на «CSS – как обрезать изображение без изменения пропорций»

  1. famss пишет:

    Отлично спасибо)

  2. Alex пишет:

    Спасибо, пригодилось ;)

  3. skif88 пишет:

    Единственный рабочий вариант на css который я искал, все остальное предалагают ересь, которая не работает. Сайт в закладки кидаю.

 
Статусы для соц.сетей на ArtKiev Design Studio