PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Publicidade:

Encontre no blog...

06/01/2013

Como cortar imagens automaticamente através do CSS (image crop)

css

Usando CSS

Para quem ainda não conhece, CSS é uma linguagem de programação muito poderosa, similar ao HTML, que controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos, ou seja, todo o layout de um site. Para saber mais, leia os nossos artigos: O que é CSS? e Simulador CSS e HTML – Ótimo para iniciantes…

O CSS pode ser utilizado de várias maneiras em um site ou blog. Se você utiliza o Blogger para gerenciar o seu blog, leia o nosso artigo: Como inserir códigos CSS no Blogger

Enfim, se você já usa o CSS  para qualquer aplicação no desenvolvimento de sites, vai aí uma dica rápida sobre como cortar imagens automaticamente.

Cortar imagens automaticamente através do CSS

Muitas vezes precisamos inserir imagens  em sites, mas em um formato padrão definido. Para isso, precisamos utilizar um editor de imagens, tipo o Photoshop, para cortarmos a figura nas dimensões desejadas, sem que haja qualquer alteração na proporcionalidade da mesma (imagem esticada ou deformada).

Mas como fazer estes cortes automaticamente e sem precisarmos recorrer a um editor de imagens?

Neste caso, vamos utilizar a tecnologia das folhas de estilo em cascata (CSS), onde iremos utilizar também uma caixa div em HTML.

Como exemplo vamos usar uma imagem hospedada com as dimensões (510 x 291):

( Imagem: http://visualdicas.com.br/images/stories/Blog/dolares.jpg )

Imagine que queremos colocar esta imagem em um espaço de 400px por 250px fixo.

1) Primeiro vamos criar nosso código CSS.

.caixa_corte {
width: 400px;
height: 250px;
overflow:hidden;
}
 
.caixa_corte img {
width: auto;
}

Obs.: Altere as dimensões em vermelho para as dimensões desejadas.

2) Depois, colocamos o código HTML no local onde queremos inserir a imagem:

<div class=”caixa_corte”>

<img src=”http://visualdicas.com.br/images/dolares.jpg” />

</div>

Obs.: Altere o endereço da imagem para o endereço desejado .

Realizado o processo, veja abaixo como ficou a imagem cortada com as dimensões 400X250px do nosso exemplo:

A chave deste script é o comando overflow:hidden, que impede que o execente do “container” <div seja exibido. Agora, toda vez que você for introduzir uma imagem cortada nas dimensões definidas no seu código CSS, basta colocá-la dentro de uma <div com o atributo class=“caixa_corte”. Adeus imagens esticadas e deformadas…

byALF

4 comentários:

Victor Ribeiro disse...

Muito bom post, amigo! Parabéns, me ajudou muito mesmo.

Lucas Antonio disse...

Interessante o post, porém, o único problema desse método é que: por mais que você redimensiona a imagem automaticamente quando fizer um upload em um blog ou site, a imagem fica completa, ou seja, demora mais tempo para carregar o site, algo que não é nada interessante para o Google :/

Fábio Campanhol disse...

Olá! Parabéns pelo artigo! Muito bom!
Será que tem como definir o alinhamento do corte também?
Segui esses passos, mas a imagem está cortando da esquerda para a direita, e não cortando as laterais... Será que tem como ajustar isso?
Obrigado!!

joao bosco disse...

Lucas Antonio, o Google usa Sprites a tempos entãooo é interessante sim, pensa comigo, é melhor você carregar(Upload) de apenas uma imagem "grande" e recortar com CSS Sprites do que carregar várias imagens, fazer várias requisições, isto é fazer vários uploads...

Postar um comentário

Gostou do Post? Então espalhe!

Quem está curtindo...

Encontre no blog...

Gostou? Então espalhe!

Twitter Delicious Facebook Digg Stumbleupon Favorites More