How to get 40px X 40px of the entire image?

Asked

Viewed 469 times

3

How do I get a certain resolution of every image? For example, I have this image:

But in CSS I will only get 20px of it. Can’t use height and width.

css

  • Want a piece of it (20px width and 20px height) or that resize?

  • I need a piece

2 answers

3

Use the property CSS clip:

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

Before

inserir a descrição da imagem aqui

Afterward

<style type="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" />

inserir a descrição da imagem aqui

3


Using the image as background-image, for example:
This is the image we’ll be working on in this example:

inserir a descrição da imagem aqui

And the code to show only 40px of the image above will be: 

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

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.