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

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

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

Пример

Кнопка Сохранить для сайта

Размер изображения: 1800 x 500


Код



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

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

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

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Гость 2013-08-08 в 21:29 / МатериалСпам
спасибо большое, то что и искал
1
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.