Створення сайтів Львів067 607 57 84
МЕНЮ

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

При підготовці зображень для Web нерідко з'являється необхідність обрізати їх, щоб виділити потрібні частини зображення і відрізати непотрібні. Крім чисто художніх суджень, така обрізка або, як її ще називають, кадрування, потрібна для зменшення обсягу файлу. Чим менше зображення, тим менше обсяг його файлу, і тим швидше воно завантажується на web сторінку.

Нерідко виникає потреба вставляти зображення в блок зафіксованого розміру. В даному випадку виникає проблема: як записати зображення в блок з відсутністю втрати співвідношення.

Природно, дозволено відрізати і масштабувати малюнки при збільшенні їх на інтернет-сайті або обрізати на серверній мові (наприклад PHP), а дозволено виготовити деякий "аналог" на звичайний CSS. В даному випадку, відрізка буде відбуватися по вертикалі. По ширині картина стане проникати цілком, а по висоті обрізатися.

Суть цього методу в тому, ніби картина стане вписана в блок конкретних розмірів. Все що не буде вміщатись в даний блок буде приховане. Рамка яка буде обрамляти картинку має ті ж характеристики що картинка. Варіант, звичайно, ніяк ще не бездоганний, однак діючий.

<style type="text/css">
  .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/article/artkiev.png">
</div>