Как лучше всего наложить холст на изображение?

Question

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

Однако должны быть соблюдены следующие условия:

• Холст должен оставаться точно поверхизображение во все времена.Следовательно, использование абсолютного позиционирования не будет работать, поскольку, если содержимое вставлено над изображением, оно переместит изображение вниз , не перемещая холст .
• Размер изображения можно изменить по сравнению с его исходным размером.Поэтому замена изображения холстом и установка его фона для изображения не будут работать.

Какие варианты у меня есть?

Answer 1

Вы должны иметь возможность использовать position:relative вместо абсолютного для вашего первого требования.

Во-вторых, я полагаю, вы можете поместить изображение и холст в промежуток.Холст будет иметь ширину / высоту 100% и будет изменен по мере изменения размера изображения, потому что размер div будет меняться, чтобы соответствовать изображению.

РЕДАКТИРОВАТЬ: на самом деле я не уверен, что position:relative будет работать.Но я считаю, что если вы используете position:absolute и родительский элемент имеет position:relative, то абсолютные позиции будут относительно родительского.