How do I make a resolution for the entire image? For example, I have this image:
But in CSS I'll only get 20px from it. You can not use height
and width
.
How do I make a resolution for the entire image? For example, I have this image:
But in CSS I'll only get 20px from it. You can not use height
and width
.
Using the image as background-image
, for example:
Here's the image we'll be working on in this example:
Andthecodetoshowjust40px
oftheaboveimagewillbe:
.minhaImagem {
background-image: url(http://i.stack.imgur.com/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 the property CSS
clip
:
clip: rect(topo, direita, rodape, esquerda);
Before
Then
<styletype="text/css">
#minhaImagem
{
position: absolute;;
clip: rect(0px,20px,20px,0px);
}
</style>
<img src="http://i.stack.imgur.com/anKc1.gif"width="40" height="40" id="minhaImagem" />