Мне нравится делать обрезку на стороне клиента и изменять размер изображения перед его отображением в HTML 5. (Фактическое приложение реакции позволит выбрать часть большего изображения, которое отображается в окне изображения фиксированного размера)

Я знаю смещение в пикселях (x и y) исходного изображения и необходимые коэффициенты масштабирования для ширины и высоты.

Я легко могу кадрировать (без масштабирования)

<div style="overflow:hidden; width:300; height:300;">
    <div style="display: inline-block; background: url('test.png') no-repeat; background-position: -10px, -10px;" />
</div>

Масштабирование работает, но обрезка искажается, когда я включаю масштабирование

<div style="overflow:hidden; width:300; height:300;">
    <div style="display: inline-block; background: url('test.png') no-repeat; background-position: -10px, -10px; transform: scale(10, 10);" />
</div>
-1
Ruediger Jungbeck 22 Окт 2018 в 15:48

2 ответа

Лучший ответ

Я нашел следующее решение

<div style="overflow: hidden; width: 300px; height: 300px;">
    <img src="test.png" style="width: 600px; height: 600px; transform: translateX(-300px) translateY(-300px);">
</div>

Важными аспектами являются:

  • Имейте контейнер, ограничивающий размер (div) с переполнением: скрытый
  • Измените размер всего изображения, масштабируя ширину и высоту
  • Обрежьте необходимые части из изображения с измененным размером (с помощью transform translateX translateY)
0
Ruediger Jungbeck 25 Окт 2018 в 09:26

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

Я бы посоветовал вам установить изображение в контейнер фиксированного размера, как вы заявили, установить overflow: hidden; (конечно) и обрезать изображение с помощью clip-path. Для изменения размера используйте transform: scale() с одним параметром, в зависимости от того, насколько вам нужно его масштабировать.

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

0
jpegzilla 22 Окт 2018 в 13:07
52929774