При підготовці зображень для 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>