3

Como faço para uma determinada resolução de toda imagem? Por exemplo, tenho essa imagem:

Mas no CSS irei pegar somente 20px dela. Não dá para usar height e width.

2
  • Quer um pedaço dela (20px largura e 20px altura) ou que redimensionar? Commented 4/07/2015 às 0:16
  • Preciso de um pedaço
    – misakie
    Commented 4/07/2015 às 0:49

2 Respostas 2

3

Usando a imagem como background-image, por exemplo:
Esta é a imagem em que vamos estar a trabalhar neste exemplo:

inserir a descrição da imagem aqui

E o código para mostrar apenas 40px da imagem acima será:

.minhaImagem {
    background-image: url(https://i.sstatic.net/jKGy3.jpg);
    background-repeat: no-repeat;
    width: 40px;
    height: 40px;
    background-position: -348px -326px; /* Escolha a parte da image que queres mostrar aumentando/diminuindo estes valores */
}
<div class="minhaImagem"></div>

3

Use a propriedade CSS clip:

clip: rect(topo, direita, rodape, esquerda);

Antes

inserir a descrição da imagem aqui

Depois

<style type="text/css">
    #minhaImagem
    {
        position: absolute;;
        clip: rect(0px,20px,20px,0px);
    }
</style>

<img src="https://i.sstatic.net/anKc1.gif" width="40" height="40" id="minhaImagem" />

inserir a descrição da imagem aqui

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 .