Как обрезать изображение css

Как обрезать картинку при помощи css? [закрыт]

Закрыт. Этот вопрос необходимо уточнить или дополнить подробностями. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.

Закрыт 7 лет назад .

Нужно обрезать край у фона вот таким образом, сзади фон тоже сделан картинкой.

Отслеживать
4,286 14 14 золотых знаков 42 42 серебряных знака 92 92 бронзовых знака
задан 11 сен 2016 в 12:35
Эльдар Гучеренко Эльдар Гучеренко
551 1 1 золотой знак 5 5 серебряных знаков 12 12 бронзовых знаков

1 ответ 1

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

Например так, используя clip-path :

.wrap < background: url(https://images.unsplash.com/photo-1459445364195-16475050193c?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1163&q=80&cs=tinysrgb) center no-repeat; -webkit-background-size: cover; background-size: cover; padding: 2rem; >.box < width: 100%; height: 280px; background: url(http://bennettfeely.com/clippy/pics/pittsburgh.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; -webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%); clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%); >

Отслеживать
ответ дан 11 сен 2016 в 12:47
22.4k 10 10 золотых знаков 56 56 серебряных знаков 119 119 бронзовых знаков
Леночка только маленькое НО не работает в FF IE и opera — только svg подходит в этом случае
11 сен 2016 в 13:23
@Geyan, тогда вырезать так фон, с этими углами. Это не стандартная задача для верстки.
11 сен 2016 в 13:28

да естественно , я нарисовал на svg но не могу сделать на 100% экрана , вывод сохранить как изображение , я не придираюсь — как и прежде любой ваш ответ плюсую , что на тостере что на ruSO

11 сен 2016 в 13:36
Большое спасибо , это то что мне надо . Век живи , век учись .
11 сен 2016 в 15:07

• html
• css

Важное на Мете

Похожие

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как обрезать картинку в css

Как только не извращались верстальщики, чтобы кропнуть изображение средствами CSS. С появлением свойств object-fit и object-position, задача сильно упростилась.

Во-первых, что такое кроп и для чего он нужен?

Кроп (crop) в переводе с английского значит «обрезать». В этом и есть основная задача кропа — вписывать без искажений изображения в блоки с иными размерами и пропорциями. Чаще всего используется в галереях, плитке, списках и т.п.

Кропировать изображение можно по-разному. Обычно вырезают середину по меньшей стороне изображения. Потому что именно там чаще всего находится смысловая нагрузка изображения.

Чтобы вырезать середину изображения и задать ему размеры 100×100 воспользуемся CSS-свойством object-fit и object-position

Получится примерно так:

Остановимся подробнее на свойствах.

Object-Fit

Свойство Object-Fit определяет, как содержимое элемента должно заполнять контейнер относительно его высоты и ширины.

Object-Fit может принимать следующие значения:

• Fill — дефолтное значение, изображение заполняет полностью контейнер по всей высоте и ширине.
• Contain — изображение масштабируется, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью поместиться внутри контейнера.
• Cover — изображение обрезается, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью заполнить область контейнера.
• None — изображение не изменяет свои размеры, чтобы поместиться и заполнить область контейнера.
• Scale-Down — изображение выбирает из двух значений none и contain то значение, которое даёт меньшие размеры.

Object-Position

Свойство object-position используется в сочетании с object-fit и задаёт положение элемента внутри контейнера относительно координатных осей X и Y.

Значение по умолчанию 50% 50%.

Для позиционирования можно использовать относительные и абсолютные единицы, в том числе их комбинации.

В заключение

Напомню, в Вордпресс для кропа существует прекрасная функция add_image_size(), которая регистрирует новый размер изображений для последующего использования в интерфейсе. Если на сайте повсеместно используется какой-то конкретный размер изображений, целесообразнее его зарегистрировать (или скорректировать имеющийся) и использовать на уровне бэкенда.

Делаю сайты на Вордпресс с 2008 года, в том числе уникальные инструменты для решения сложных бизнес‑задач.

Магия CSS: Методы обрезки изображений при помощи CSS и SVG

Всем привет, меня зовут Анна Блок и сегодня мы поговорим о том, как обрезать изображения, не используя графических программ.

Где это может пригодиться?

Прежде всего, на сайтах, где контент с изображениями, вероятнее всего, не будет подрезаться под какой-либо конкретный блок.

Яркий пример: блог на WordPress.

Предположим, вы хотите, чтобы обложка вашей статьи имела пропорции 1:1 (квадрат). Ваши действия:

1. Скачаете подходящую картинку из интернета;
2. Обрежете ее в фотошопе до нужных пропорции;
3. Опубликуете статью.

Зайдя на сайт, вы увидите тот результат, который ожидали.

Но, предположим вы забыли обрезать картинку в фотошопе и выгрузили рандомное изображение в качестве обложки из интернета, что будет тогда?! Правильно, верстка сломается. А если вы совсем не использовали CSS, то картинка HD разрешения и вовсе может перекрыть весь обзор на текст. Поэтому важно уметь делать обрезку изображений при помощи CSS стилей.

Давайте разберем разные ситуации того, как это можно реализовать не только при помощи CSS, но и SVG.

Пример 1

Попробуем обрезать изображение которое размещено при помощи background-image. Создадим небольшую HTML-разметку

Переходим к стилизации CSS. Через background-image добавляем изображение, указываем рамки для нашего изображения, центрируем изображение при помощи background-position и задаем background-size :

Ознакомиться подробнее с HTML и CSS можно тут:

Это был первый и самый простой метод по обрезке изображения. Теперь давайте рассмотрим второй пример.

Пример 2

Предположим, у нас есть всё тот же контейнер box внутри которого находится тег img с изображением, которое мы сейчас будем стилизовать.

Далее мы будем стилизовать два элемента: класс box и тег img .
Начнем работу со связкой свойств position: relative для box и для position: absolute для img .

Также разместим наше изображение по центру относительно того объекта, который мы создадим. И используем свойство, которое довольно редко используются: object-fit .

На мой взгляд, это лучший метод. Он идеально подойдет для блогов, если вы используете изображения для постов совершенно разных пропорций.

Ознакомиться подробнее с HTML и CSS можно тут:

Пример 3

Также создавать обрезку для изображений мы можем в момент, если мы вставляем их в SVG элементы. Для примера возьмем круг. SVG мы можем создать при помощи тегов. Создаем обрамляющий тег svg внутри которого будет находится тег circle и тег pattern . В теге pattern пишем тег image . В нем мы указываем атрибут xlink:href и добавляем изображение. Также добавим атрибуты ширины и высоты. Но на этом не все. Нам потребуется добавить значение fill . Чтобы наша работа считала законченной мы добавим вспомогательный атрибут preserveAspectRatio в тег image , который позволит заполнить наше изображение «от и до» по всему кругу.

Я не могу назвать этот метод универсальным. Зато его можно использовать в исключительных случаях. Например, если мы затронули тему блога, то идеально такой метод мог бы вписаться для аватарки автора который пишет статью.

Ознакомиться подробнее с HTML и CSS можно тут:

Итоги:
Мы разобрали 3 метода обрезки изображения на сайтах: при помощи background-image , используя тег img и связанный с паттерном svg со встраиванием растровых изображений при помощи тега image . Если вы знаете ещё какие-то методы по обрезке изображения при помощи SVG, то делитесь ими в комментариях. Не только мне, но и другим будет полезно узнать о них.

Не забывай задавать свои вопросы по вёрстке или фронтенд-разработке у профессионалов на FrontendHelp в режиме онлайн.

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

Этот класс растянет картинку на всю ширину блока, и автоматически построит ее высоту.

ну и похожий класс описать для варианта 100% hegit и width:auto;

1. Вы используете бутстрап, там этот код уже есть (написанный в этом примере), удалите его из своих стилей, в Ашем случае достаточно просто к картинке добавить img-responsive.
2. Если надо ограничить по высоте, то можно сделать например так:

3 простых и быстрых техники CSS для обрезки картинок

18.01.2010 11.02.2014 по 2Web 96 116

В этой статье мы расскажем вам о 3 быстрых и простых методах CSS, которые вы cможете использовать, чтобы показать только часть картинки на вашей страничке.

Все использованные здесь методы, фактически нуждаются только в паре строчек CSS кода. Однако, это не обрезание в прямом смысле этого слова (CSS пока не может сделать этого), мы просто скрываем и показываем только ту часть картинки, которую мы хотим увидеть.

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

Техника 1 — использование отрицательных полей (Negative Margins)

Посмотреть пример
По этой технике картинку необходимо поместить в родительский элемент, в нашем случае, это параграф (тэг

) . Родительский абзац должен быть плавающим(floating) элементом (или с заданной шириной). Эта техника не будет работать на элементах с атрибутом «в полную ширину» (full width).

Затем мы задаем отрицательные поля для всех четырех сторон: верх( top ), право( right ), низ( bottom ) и лево( left ). Отрицательные поля определяют: насколько срезано в каждом направлении наше изображение, находящееся в родителе(параграфе). Получаем только часть от первоначальной картинки — обрезок. Затем, когда мы заменяем родительское свойство overflow на hidden , мы скрываем поля, которые находятся за нашим обрезком. Цель достигнута. Вам, правда, придется повозиться со значениями, чтобы по-настоящему почувствовать, как это работает.

Похожие публикации:

1. Как сделать background прозрачным в css
2. Как сделать адаптивную ширину css
3. Как сделать блок на всю ширину страницы css
4. Как сделать бэкграунд картинкой в css

Как обрезать изображение в CSS

Есть несколько способов обрезать изображение в CSS; однако самыми простыми и эффективными из них являются:

• Использование подгонки объекта к изображению.
• Использование ширины, высоты и переполнения на контейнер изображения.

Использование подгонки объекта

Свойство CSS подгонки объекта можно использовать для удобной обрезки изображений. Он может иметь пять значений, но крышка является наиболее подходящей. Если установить object-fit: cover; , соотношение сторон изображения сохраняется, но при этом соответствует размеру его поля содержимого.

Свойство object-fit можно использовать в сочетании с object-position для настройки области изображения для обрезки. . Свойство object-position требует двух значений: x% и y% для размещения изображения (позиция по умолчанию — 50% 50% ). Мы также можем указать позиции пикселей: xpx и ypx , но обычно это бесполезно.

Учтите это 4 8 0 480 480 x 2 4 0 240 240 пикселей изображение щенка; он был обрезан с использованием object-fit и скорректирован с помощью object-position . Поэкспериментируйте, изменив его значения и обратите внимание на результат:

• Вывод
• HTML
• CSS (SCSS)

Использование ширины, высоты и переполнения

Наряду с width и height , контейнеры CSS также имеют свойство переполнения , которое можно использовать для обрезки изображения. Чтобы активировать свойство переполнения, заключите изображение в div определенной ширины и высоты и установите overflow: hidden . Это гарантирует, что базовый контейнер сохранит свою структуру, и любое переполнение изображения будет скрыто за контейнером.

Наконец, поле Свойство используется на изображении для настройки области обрезки. Это свойство принимает четыре значения. Однако важны только первое и последнее из четырех значений, поскольку они представляют пиксели сверху и слева соответственно..

Рассмотрим пример ниже; он использует ту же 4 8 0 480 480 x 2 4 0 240 240 изображение щенка. Поэкспериментируйте со значениями width , height и margin , обратите внимание на результат:

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

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

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