Как обрезать img в css
Перейти к содержимому

Как обрезать img в css

  • автор:

CSS — как обрезать изображение без изменения пропорций

При подготовке изображений для Web нередко появляется необходимость обрезать их, чтобы выделить нужные части изображения и отсечь ненадобные. Не считая чисто художественных суждений, такая обрезка либо, как ее еще именуют, кадрирование, нужна для уменьшения объема файла. Чем меньше изображение, тем меньше объем его файла, и тем резвее оно загружается на web страничку.Нередко возникает надобность заключать изображения в блок зафиксированного объема. В предоставленном случае возникает неувязка: как записать картину в блок в отсутствии утраты соотношения.Естественно, разрешено отрезать и масштабировать рисунки по прибавления их на интернет-сайт либо кадрировать на серверном языке (к примеру PHP), а разрешено изготовить некоторый «аналог» на обычный 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 

Оригинал:

Что получилось:

css обрезка картинок

нужно обрезать и вставить обычную, горизонтальную и вертикальную картинки в div так, что бы они полностью заполняли собой div не искажаясь (масштабировать по меньшей стороне, а лишнее обрезать) у меня всё работает, кроме обработки квадратной картинки, она должна показыватья почти вся, а видна только ее половина

.img_wrap < width: 300px; height: 200px; overflow: hidden; /*line-height: 200px;*/ /*text-align: center;*/ border-style: solid; >.img_wrap img
  
vertical
horizontal
normal

Отслеживать

задан 12 окт 2017 в 11:28

173 1 1 золотой знак 3 3 серебряных знака 11 11 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

.img_wrap < width: 300px; height: 200px; border-style: solid; >.img_wrap img
  
vertical
horizontal
normal

Отслеживать

ответ дан 12 окт 2017 в 21:20

1,108 1 1 золотой знак 7 7 серебряных знаков 13 13 бронзовых знаков

Обрезка изображений в CSS с помощью clip-path

clip-path — очень интересное свойство CSS. Оно позволяет обрезать видимую часть элементов SVG, HTML и изображений.

Определение базовых фигур с помощью clip-path

clip-path позволяет легко вырезать основные фигуры, используя ключевые слова (polygon, ellipse, circle), которые являются частью модуля CSS exclusion.

Многоугольник

Многоугольник — самая гибкая из всех доступных фигур, потому что она позволяет указать любое количество точек, что немного похоже на путь SVG. Предоставляемые точки представляют собой пары координат X и Y, которые принимают любые единицы измерения (например, в пикселях или в процентах). Как мы уже сказали, это самая гибкая фигура, однако также она и самая сложная – вероятно, для ее построения вам придется использовать инструмент определения точек.

Проиллюстрируем это на примере. Сначала идет исходное изображение, а затем – изображение, модифицированное с помощью clip-path, благодаря которому оно примет форму треугольника, затем более сложную формы X и, наконец, форму звезды:

/* Triangle */ .polygon1 < -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); >/* X */ .polygon2 < -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); >/* Star */ .polygon3

Круг

Круг можно определить при помощи следующего синтаксиса:

circle(radius at posX posY)

Расположение опционально, по умолчанию это 50% 50%. Давайте рассмотрим такой пример:

.circle < -webkit-clip-path: circle(50%); clip-path: circle(50%); >.circle2

Эллипс

Эллипсы определяются при помощи такого синтаксиса:

ellipse(radiusX radiusY at posX posY)

Расположение снова опционально и по умолчанию сводится к 50% 50%. Вот примеры:

.ellipse < -webkit-clip-path: ellipse(50% 35%); clip-path: ellipse(50% 35%); >.ellipse2

Логическая вставка

С помощью логической вставки можно определить внутренний прямоугольник, а все, что снаружи, будет вырезано. Это позволяет легко эффективно обрезать изображения или элементы прямо в браузере. Вы также можете закруглить края прямоугольника с помощью ключевого слова round:

.inset < -webkit-clip-path: inset(20% 25% 20% 10%); clip-path: inset(20% 25% 20% 10%); >.inset2

Анимация и переход

Для создания интересных эффектов с помощью clip-path также можно применять анимацию и переходы. Просто убедитесь, что все шаги вашей анимации содержат одинаковое количество точек.

Следующие правила CSS заставят наше исходное изображение менять форму:

.trigger-btn:hover + img < animation: magic 4s infinite; >@keyframes magic < 0% < -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); >20% < -webkit-clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%); clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%); >40% < -webkit-clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%); clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%); >60% < -webkit-clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%); clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%); >80% < -webkit-clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%); clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%); >100%

Произвольные формы SVG

Вы также можете определить любую произвольную форму и присвоить ее как значение clip-path. Начать работу можно с такого инструмента, как Sketch, – в нем вы можете создать свою фигуру, а затем скопировать разметку SVG в текстовый редактор. В разметке SVG просто оберните фигуру в элемент clipPath, а затем оберните clipPath в блок defs.

Теперь вы можете применить свою фигуру в качестве значения clip-path, используя ключевое слово url и идентификатор формы SVG:

shape

Итоги

Попробуйте также Clippy – это отличный инструмент, помогающий определить значения для свойства clip-path.

На данный момент свойство clip-path поддерживается 95% браузеров по всему миру. Однако при его использовании следует обязательно включать варианты с префиксом -webkit-clip-path, которые по-прежнему необходимы для Safari.

Как с помощью CSS сделать обрезку картинки до определенного размера?

Добрый день уважаемые люди!
У меня такой вопрос:
Допустим есть блок 200х500 пкс, там умещается картинка 200х300 пкс(сверху), и текст 200х300 пкс (соответственно снизу).
Вот заливаю я картинку на сервер, ставлю img src() + класс, и картинка чудесным образом обрезается до размеров 200х300 пкс, и нет никаких белых полей по бокам и сверху/снизу, не растянута и не сжата(т.е. соотношение тоже самое как и большой картинки).
Как это можно реализовать? css или js?

  • Вопрос задан более трёх лет назад
  • 77336 просмотров

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *