Обрезание изображения через CSS

Часто бывает так, что изображение больше блока, в который мы хотим поместить картинку. Что уж говорить об интерактивных сайтах, где пользователи добавляют большие изображения, а они тем временем растягивают ваш сайт, он становится, проще говоря, неправильным. Разумно, через CSS указать максимальные размеры изображения в определенном элементе (max-width и max-height), но от этого пропадает нужная нам четкость картинки. В любом случае лучше использовать другой метод CSS.

Пример



Код

<div style="width:300px;height:110px;overflow:hidden"> <img src="//yraaa.ru/img/sky.jpg"> </div>

Ключевую роль играет именно overflow:hidden.
Используя этот атрибут, можно обрезать изображения, но при у словии, что вы указали размеры width и height (max-width и max-height).

Обратите внимание на то, что размеры у изображения не указаны

Тоже самое можно сделать с блочными элементами и текстом.