Отправить заявку

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>

Оригинал:

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

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