Mask in image

Navigation
1

I'm trying to apply a "mask" on my image, to just get the center of it and apply 50px to 52px , I tried to use clip-path but it does not work, strong> and chrome for tests, 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 "stretching" it

    
asked by anonymous 14.12.2015 / 13:18

1 answer

2

One solution is to use the image as the background for 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>
    
14.12.2015 / 13:43
Event toggle_sidebar Add Players in script code