Mask in image

Asked

Viewed 199 times

1

I am trying to apply a "mask" to my image, to take only the center of it and apply 50px for 52px, tried to use the clip-path but it doesn’t work, I’m using the opera and the Chrome for testing, follow my code:

CSS

.img_tamanho_icon
{
    width: 50px;
    height: 55px;
    clip-path: inset(52px 50px 52px 50px);
     -webkit-clip-path:inset(52px 50px 52px 50px);
    display: block;
    overflow: hidden;
}

HTML

<img src="minhaImg.jpg" class="img_tamanho_icon">

How could I do this? Without losing image resolution, for example "stretch" the same

html css web-application

  • Property support clip-path: http://caniuse.com/#feat=css-clip-path

  • What is the desired effect? It would be nice to better describe and post an example image, as there are often more suitable tools to solve the problem. Careful not to fall in the XY problem.

1 answer

2


One solution is to use the image as the background of an element:

.centro {
   width: 50px;
   height: 52px;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   background-image: url('http://placehold.it/200x100');
 }
<div class="centro"></div>

  • the problem that he ends up giving too much "zoom" in the image, for it is much larger than I am delimiting.

  • So you need to resize the image as close as 50x52? @Marcoshenrique

  • it would be exactly that, it would help and much, for it not to be stretched

  • 1

    Maybe the property background-size: cover I updated the example. @Marcoshenrique

  • With this example I got what I needed, thank you very much for the help and attention Lucius.

Browser other questions tagged html css web-application

You are not signed in. Login or sign up in order to post.