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

Question

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

Answer 1

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

<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)

Answer 2

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

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

Имейте в виду, что можно использовать и другое правило, например CSS object-fit .