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…
4 comentários:
Muito bom post, amigo! Parabéns, me ajudou muito mesmo.
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 :/
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!!
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