Как задать маску в виде изображения для картинки в html/css?

Question

[Илья Ломаев]

Всем доброго времени суток!
Столкнулся с такой проблемой - необходимо задать маску-изображение для картинки, но есть большое но! Оно должно уменьшаться на адаптиве, то есть не получится задать статичную картинку просто в виде локальной ссылки, потому что размер его изменить при адаптиве не получится.
Прикрепил фотку того, что надо сделать, из макета
Суть в том, что просто прописать на БГ эту картинку не получится, так как дожна быть возможность управлять этим изображением через CMS, и в случае чего менять его

Comments

[andand44]

Пропишите в html коде стили с фоновым изображением. Так их можно будет менять через админку, не трогая стили

<div class="test" style="background-image: url(https://via.placeholder.com/200x80/"></div>

[Ankhena]

andand44, а ещё лучше так

<div class="test" style="--bgi: url(https://via.placeholder.com/200x80/)"></div>

.test {
background-image: var(--bgi)
}

Для маски clip-path, но вы уверены, что это не просто повернутый блок, а именно маска с вырезами по середине и что это подойдет для любой фото?

[Илья Ломаев]

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

[Иван Медведев]

А что если использовать атрибуты srcset и sizes? Они дают возможность подставлять разные изображения (по размеру в том числе) исходя из параметров sizes
<img src="" srcset="" sizes="" alt="">

[andand44]

Ankhena, Тоже хороший современный вариант.
Илья Ломаев, Маску можно пропорционально сжимать с помощью aspect-ratio или хака с padding

[Ankhena]

Илья Ломаев,

И это я смог реализовать, но уменьшить маску при адаптиве не получалось
Написано 9 минут назад

Так выкладывайте, что не получилось в песочницу.

Возможно, вам сюда https://yoksel.github.io/relative-clip-path/

[Илья Ломаев]

andand44, можно про это поподробнее?

[Вадим]

Илья Ломаев, если в маске опорные точки указаны в процентах, то она будет изменяться вместе с размером блока.
А ещё есть mask-image, или маску можно задавать через свг.

[Илья Ломаев]

Вадим, у меня задано mask: url('../img/film-page/films-filter.png') no-repeat; вот так

[Илья Ломаев]

Вадим, то есть в разметке ее нет
слеовательно изменить ее размер не получается, я не могу найти, как из цсс менять размеры маски, которой в разметке нет

[Ankhena]

Илья Ломаев,

я не могу найти, как из цсс менять размеры маски, которой в разметке нет

Так и менять ,через mask-size https://developer.mozilla.org/en-US/docs/Web/CSS/m... или, раз пишете в одно свойство, то по аналогии с bg

Answer 1

[Name_23]

В html есть тег, который позволяет вместить одну и ту же картинку разного формата и выдавать нужную в зависимости от разрешения экрана.

Comments

[Илья Ломаев]

в разметке нет маски, она в css прописана
mask: url('../img/film-page/films-filter.png') no-repeat;

[Vladislav]

Ты не должен заморачиваться с этим, просто попроси дизайнера, чтобы скинул фигуру в пнг и наложи поверх картинки и все, а так можно и канвасом, но ты тупо напишешь много лишнего кода, просто возьми через before или after в content: url() пропиши путь до фигуры - маски, спозиционируй поверх img и все

Answer 2

[Liuonid]

Я бы в таких случая использовал бы canvas и всё.