Técnica para cortar e centralizar imagens com CSS
- Detalhes
- Angelo Luis Ferreira
- CSS
- Acessos: 25978
Neste tutorial vamos mostrar uma técnica CSS muito comum em templates de CMS's responsivos, como o Wordpress por exemplo, onde ela é utilizada para cortar miniaturas de imagens de variados tamanhos e centraliza-las em um container com dimensões pré-definidas.
Obs1.: A técnica CSS3 apresentada neste tutorial funciona em todos os navegadores modernos, incluindo o I9.
Obs. 2: Utilizaremos para este tutorial a propriedade CSS3 trannsform: translate(x,y).
CSS3 transform
A propriedade CSS3 Transform permite alterações lineares em elementos HTML, incluindo rotação, inclinações, alteração da escala e deslocamentos. Temos dois tipos de transformações no CSS3, a 2D e 3D.
Para saber mais sobre CSS3 Transforms 2D veja o guia completo: CSS 2D Transforms
Como funciona
A técnica funciona posicionando a imagem de modo que seu canto superior esquerdo fique posicionada no centro do contêiner. A partir daí, através da propriedade CSS3 transform: translate(-50%, -50%); a imagem se desloca para cima, cortando parte de sua largura ou altura (quando for retrato).
O pulo do gato é que os valores percentuais passados para a conversão são relativos ao elemento, não ao contêiner, como seria caso manipulássemos as propriedades top e left do elemento.
HTML
1. Primeiro vamos inserir nossas imagens. No exemplo abaixo disponibilizamos duas imagens de tamanhos diferentes. A primeira possui a largura maior que a altura (paisagem) e a segunda imagem, ao contrário, possui a altura maior que a largura (retrato).
2. Para diferenciar imagens tipo retrato, vamos utilizar uma classe CSS denominada "portrait". Para essa técnica, é necessário sempre diferenciar imagens tipo retrato. Em sites dinâmicos isso pode ser possível ser feito no "backend" utilizando-se PHP ou Java por exemplo.
<div class="thumb">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/75/Zacharias_Wagner_-_Mameluca.jpg" />
</div>
<br/>
<div class="thumb">
<img src="http://upload.wikimedia.org/wikipedia/commons/4/44/Docteur_Piron_-_La_Bonite.JPG" class="portrait" />
</div>
CLASSES CSS
1. Agora vamos vamos definir os estilos para a container "thumb" (elemento div) e para a imagem contida nele (elemento img).
2. É importante salientar que é na classe "thumb" que definimos o tamanho do container. Portanto, podemos definir as propriedades max-width e height de acordo com o estilo desejado para a página web. A definição da borda é opcional.
3. Na definição para o elemento "img" utilizado no exemplo abaixo, vamos posicionar o corte da imagem de forma centralizada. Se desejarmos, podemos alterar as propriedades left, top e transrform translate para cortar a imagem da forma que desejarmos.
4. Observe que utilizamos: webkit-transform e ms-transform para que o estilo funcione na maioria dos navegadores web, principalmente nas versões mais antigas.
5. A classe portrait deverá ser utilizada nas seguintes condições:
5.1.1. Em imagens onde a altura é maior que a largura.
5.1.2. Quando você pretende fazer o corte na altura (height >max-width ) em imagens onde a altura é maior que a largura.
5.1.3. Quando você pretende fazer o corte na largura (max-width >height) em imagens onda a largura é maior que a altura.
5.1.4. Em casos em que a diferença entre max-width e heigh é muito grande ou muito pequena.
.thumb {
position: relative;
max-width: 170px;
height: 260px;
overflow: hidden;
border: 1px solid #000;
}
.thumb img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumb img.portrait {
width: 100%;
height: auto;
}
Onde:
- position: relative - elemento passa a aceitar as propriedades Top, Bottom, Left e Right.
- max-width - define a largura máxima da div em pixels (coloque o valor que desejar);
- height - define a altura da div em pixels (coloque o valor que desejar);
- overflow: hidden - o conteúdo fora da div é cortado e nenhuma barra de rolagem é exibida;
- border - define a borda da div (opcional);
- position: absolute - posiciona qualquer elemento de acordo com o elemento pai que tenha um position diferente de static (no caso a div "thumb" é position: relative);
- left - define a posição absoluta da imagem em relação à div (da esquerda para a direita);
- top - define a posição absoluta da imagem em relação à div (de cima para baixo);
- transform: translate - define o deslocamento da imagem em relação à div.
Veja o nosso exemplo na prática: Tente você mesmo »
Mais exemplos de utilização
Mostraremos agora 2 exemplos, onde utilizamos as mesmas figuras mas com dimensões do container diferentes do exemplo anterior. Também no segundo exemplo, vamos utilizar um deslocamento de corte diferente dos demais exemplos:
1) Definimos o div com largura maior que altura (max-width: 260px e height: 170px) e corte centralizado.
See the Pen rNBwoyJ by Angelo Luis Ferreira (@angeloalf) on CodePen.
2) Definimos o div com largura maior que altura (max-width: 260px e height: 170px) e corte deslocado para cima. Para isso, utilizamos top=10% e transfor:translate(-50%, -10%):
See the Pen BaBZvmz by Angelo Luis Ferreira (@angeloalf) on CodePen.
TENTE VOCÊ MESMO
Veja no nosso editor HTML como foi feito o alinhamento das listas HTML do exemplo. No editor, altere os códigos da forma que você desejar até conseguir o design desejado. Depois é só copiar os códigos e colar no seu projeto. Clique no link abaixo para abrir nosso editor de testes. (Não esqueça de clicar no botão "Executar" para visualizar os resultados após modificar o código).
CÓDIGO COMPLETO DO EXEMPLO
Para copiar e colar nos seus projetos.
HTML
<div class="thumb">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/75/Zacharias_Wagner_-_Mameluca.jpg" alt="Image" />
</div>
<br/>
<div class="thumb">
<img src="http://upload.wikimedia.org/wikipedia/commons/4/44/Docteur_Piron_-_La_Bonite.JPG" class="portrait" alt="Image" />
</div>
CSS
.thumb {
position: relative;
max-width: 160px;
height: 270px;
overflow: hidden;
border: 1px solid #000;
}
.thumb img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
transform: translate(-50%,-50%);
}
.thumb img.portrait {
width: 100%;
height: auto;
}
O anúncio abaixo ajuda manter o Portal Visual Dicas