Position image css background: background-position — CSS: Cascading Style Sheets

html — Размер фона и положение фона в теге img

спросил

Изменено 1 год, 10 месяцев назад

Просмотрено 15 тысяч раз

У меня есть изображение, которое можно обрезать с помощью библиотеки JS. lib возвращает x,y, ширину и высоту выделения.

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

Вопрос — есть ли способ сделать это без переключения всех на

s, которые будут иметь все изображения в качестве фона и могут перемещаться и масштабироваться, чтобы показать обрезанную часть? Есть ли аналог такого стиля или другой возможный обходной путь, в котором я могу сохранить
тегов?

  • HTML
  • изображение
  • css

3

Если вас не интересует IE, вы можете использовать объект-подгонка и объект-позиция :

 img {
   объект подходит: обложка;
   положение объекта: по центру сверху;
}
 

5

Лучший способ добиться этого — использовать любой элемент html в сочетании с атрибутом фона css. В этом атрибуте вы можете определить поля как размеры для позиционирования и изменения размера фонового изображения. В вашем случае этот элемент будет иметь ширину и высоту, заданные вашей библиотекой урожая. Положение фонового изображения будет x и y (тоже из библиотеки), но инвертировано.

Неважно, какой элемент вы используете, это может быть любой (см. w3.org/TR/CSS2/colors.html), включая тег img, как показано в следующем примере:

 
 

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

Тем не менее, я бы порекомендовал вам использовать JavaScript-библиотеку/плагин вместо того, чтобы писать что-то самостоятельно. Есть куча решений:

  • JCrop (плагин jQuery)
  • ImageAreaSelect (подключаемый модуль jQuery
  • Урожай Uvumitools (плагин Mootools)
  • Пользовательский интерфейс JS Cropper (на основе сценария и прототипа)

1

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Фоновые изображения CSS с использованием процентного позиционирования · GitHub

Фоновые изображения CSS с использованием процентного позиционирования

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

Для просмотра откройте файл в редакторе, который показывает скрытые символы Unicode. Узнайте больше о двунаправленных символах Unicode

Показать скрытые символы

<голова>
Положение фона CSS в процентах