При подготовке изображений для 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>
Оригинал:
Что получилось:
