Уменьшение изображения с svg маской

Question

img{width:320px;clip-path:path('M315.001 6.24132e-06H5.00202C2.2578 6.24132e-06 0.0102067 2.24165 0.00226772 4.9853C0.00226772 4.99012 0.00226772 4.99579 0.00226772 4.99976L0 78.4571C42.071 106.567 183.196 189.999 242.162 189.999C275.504 189.999 309.914 113.388 319.995 78.4571L320 4.99976L320 4.9235C319.959 2.2082 317.724 0 315.001 0L315.001 6.24132e-06Z')}

  <img src="https://scx1.b-cdn.net/csz/news/800a/2018/rooster.jpg" alt="">

Есть изображение с svg маской, подскажите пожалуйста как сделать чтобы маска с изображением сохраняла свои пропорции при именьшении. Т.е. если сделать img шириной 200px, то она просто обрезается

Answer 1

как сделать чтобы маска с изображением сохраняла свои пропорции при именьшении. Т.е. если сделать img шириной 200px, то она просто обрезается

так происходит, потому что вы взяли в качестве CSS clip-path svg path(M315..) , который имеет фиксированные размеры width="320px" height="190px"

Поэтому, если задать img размеры равные размерам clip-path 320px то всё будет отображаться нормально.

Если увеличить размеры img, то картинка увеличится, но будет обрезаться по размерам clip-path - 320px
Если уменьшить размеры img, например до 220px, то вы не увидите часть clip-path, так как он больше картинки на 100px.

Чтобы сделать clip-path адаптивным необходимо добавить viewBox

Чтобы узнать атрибуты viewBox используем метод JS getBBox()

<svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"  style="border:1px solid red">
<path id="path" fill="none" stroke="black" d="M315.001 6.24132e-06H5.00202C2.2578 6.24132e-06 0.0102067 2.24165 0.00226772 4.9853C0.00226772 4.99012 0.00226772 4.99579 0.00226772 4.99976L0 78.4571C42.071 106.567 183.196 189.999 242.162 189.999C275.504 189.999 309.914 113.388 319.995 78.4571L320 4.99976L320 4.9235C319.959 2.2082 317.724 0 315.001 0L315.001 6.24132e-06Z" />
</svg>
<script> 
let bb = path.getBBox();
console.log(bb);
</script>

Добавляем viewBox="0 0 320 190" и width="320" чтобы получить изображение с clip-path, как в вашем примере

image{
clip-path: url(#cp);
}

<svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" width="320" viewBox="0 0 320 190"> 
<defs> 
<clipPath id="cp">
 <path id="path" fill="none" stroke="black" d="M315.001 6.24132e-06H5.00202C2.2578 6.24132e-06 0.0102067 2.24165 0.00226772 4.9853C0.00226772 4.99012 0.00226772 4.99579 0.00226772 4.99976L0 78.4571C42.071 106.567 183.196 189.999 242.162 189.999C275.504 189.999 309.914 113.388 319.995 78.4571L320 4.99976L320 4.9235C319.959 2.2082 317.724 0 315.001 0L315.001 6.24132e-06Z" />
 </clipPath>
 </defs> 
 <image href="https://scx1.b-cdn.net/csz/news/800a/2018/rooster.jpg" width="100%" height="100%" />
</svg>

Теперь уменьшаем ширину до width="220px"

image{
clip-path: url(#cp);
}

<svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" width="220" viewBox="0 0 320 190"> 
<defs> 
<clipPath id="cp">
 <path id="path" fill="none" stroke="black" d="M315.001 6.24132e-06H5.00202C2.2578 6.24132e-06 0.0102067 2.24165 0.00226772 4.9853C0.00226772 4.99012 0.00226772 4.99579 0.00226772 4.99976L0 78.4571C42.071 106.567 183.196 189.999 242.162 189.999C275.504 189.999 309.914 113.388 319.995 78.4571L320 4.99976L320 4.9235C319.959 2.2082 317.724 0 315.001 0L315.001 6.24132e-06Z" />
 </clipPath>
 </defs> 
 <image href="https://scx1.b-cdn.net/csz/news/800a/2018/rooster.jpg" width="100%" height="100%" />
</svg>

Видим, что clip-path уменьшился с соблюдением пропорций

Но размеры останутся постоянными при изменении размеров окна браузера.

Чтобы сделать его адаптивным, зададим ширину и высоту SVG в процентах

width="25%" height="25%"

image{
clip-path: url(#cp);
}

<svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" width="25%" height="25%" viewBox="0 0 320 190"> 
<defs> 
<clipPath id="cp">
 <path id="path" fill="none" stroke="black" d="M315.001 6.24132e-06H5.00202C2.2578 6.24132e-06 0.0102067 2.24165 0.00226772 4.9853C0.00226772 4.99012 0.00226772 4.99579 0.00226772 4.99976L0 78.4571C42.071 106.567 183.196 189.999 242.162 189.999C275.504 189.999 309.914 113.388 319.995 78.4571L320 4.99976L320 4.9235C319.959 2.2082 317.724 0 315.001 0L315.001 6.24132e-06Z" />
 </clipPath>
 </defs> 
 <image href="https://scx1.b-cdn.net/csz/news/800a/2018/rooster.jpg" width="100%" height="100%" />
</svg>

БЛОГ НА HUSL

Уменьшение изображения с svg маской

Ответы (1 шт):