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

Как обрезать background image css

  • автор:

Как обрезать по краям картинку шапки

mkrhst

mkrhst

12.12.2013 16:08 2 770

как обрезать по краям картинку шапки при разных расширениях монитора.
То есть есть картинка с шириной 1950 px . надо поставить ее в шапку сайта на всю ширину.Но так как большинство мониторов 1280 px, то мне надо чтоб картинка не сжималась по ширине,а обезалась по краям,находясь по центру(в равной степени обрезалась и справа и слева)

Ответы на пост (4) Написать ответ

Как обрезать background в css3

Подскажите, как отрезать фон. У меня картинка 800 на 800, я сдвигаю через background-position: -80px 400px, как отрезать теперь 200px на 200px у сдвинутой картинки?

Дополнен 8 лет назад
а по точней можно?) а то не выходит
Голосование за лучший ответ

background-image: url(«путь до картинки»);
background-position: center center;
background-size: cover;
width: 200px;
height: 200px;

можешь задать
background-position: 100% center;
вместо
background-position: center center;

denis popovУченик (230) 8 лет назад
немного не то) но вроде разобрался
Александр Мыслитель (9432) Конечно не то, ты же не позаботился выложить код с картинкой в песоницу
задать элементу width и height по 200px

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

Похожие вопросы
Ваш браузер устарел

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.

Как обрезать background-image?

dimka-dooz

Очень странное решение с текстом на изображении. Это априори не правильно. Разделите текст и фон, это будет и вернее и удобнее. Ловить пиксели, на малейших изменениях это не очень хорошо.

Ответ написан более трёх лет назад
Нравится 2 11 комментариев

LenovoId

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

dimka-dooz

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

LenovoId

Дмитрий Клусевич: я рад что нашлось слово которое заменило латинщину

nazares

. Shadow: использовать целое предложение ради замены одного слова, разве это замена ?

LenovoId

Sergei Nazarenko: ну как сказать то , можно вообще не каверкать русский язык и выражаться только на русском
я просто не вижу смысла в иностранных словах , иностранцы почему то не используют русские слова для выражения мысли — тот же пиzdec не заменим , но он присутствует только в русском

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

css svg

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 .

.box < position: relative; overflow:hidden; width:300px; height:300px; >.box img

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

Ознакомиться подробнее с 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 в режиме онлайн.

Смотреть видео:

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

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