Técnica para cortar e centralizar imagens com CSS

Por: Angelo Luis Ferreira | 27/08/2019 Acessos: 26.267

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

Tente você mesmo »

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;
}