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
.
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
.
Usando a imagem como background-image
, por exemplo:
Esta é a imagem em que vamos estar a trabalhar neste exemplo:
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>
Use a propriedade CSS
clip
:
clip: rect(topo, direita, rodape, esquerda);
Antes
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" />