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

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

10.04.201146321

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

Пример

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

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


Код



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

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

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



Сохраните в социальную сеть
Комментарии (1)
Гость 08.08.2013 в 21:29Спам
спасибо большое, то что и искал
1
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт