1

Estou tentando aplicar uma "máscara" em minha imagem, para pegar apenas o centro da mesma e aplicar 50px por 52px, tentei utilizar o clip-path mas não funciona, estou utilizando o opera e o chrome para testes, segue meu código:

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">

Como eu poderia fazer isto? Sem perder a resolução da imagem, por exemplo "esticar" a mesma

2
  • Suporte da propriedade clip-path: caniuse.com/#feat=css-clip-path Commented 14/12/2015 às 21:09
  • Qual é o efeito desejado? Seria legal descrever melhor e postar uma imagem exemplificando, pois muitas vezes há ferramentas mais adequadas para se resolver o problema. Cuidado pra não cair no Problema XY.
    – Largato
    Commented 15/12/2015 às 2:26

1 Resposta 1

2

Uma solução é utilizar a imagem como plano de fundo de um elemento:

.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>

5
  • o problema que ele acaba dando muito "zoom" na imagem, por ela ser muito maior do que estou delimitando. Commented 14/12/2015 às 13:20
  • Então você precisa redimensionar a imagem o mais próximo de 50x52? @MarcosHenrique Commented 14/12/2015 às 18:24
  • seria exatamente isso, ajudaria e muito, para ela não ficar esticada Commented 14/12/2015 às 18:26
  • 1
    Talvez a propriedade background-size: cover supra sua necessidade, atualizei o exemplo.. @MarcosHenrique Commented 15/12/2015 às 1:45
  • Com este exemplo consegui o que precisava, muito obrigado pela ajuda e atenção Lúcio. Commented 15/12/2015 às 11:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .