Como Fazer Crop Responsivo em Imagens com CSS

Por: Angelo Luis Ferreira | 09/12/2024 Acessos: 315

Objetivo

O objetivo deste artigo é ensinar desenvolvedores e designers web a implementar as técnicas mais eficazes e modernas de crop (corte) responsivo em imagens, utilizando apenas CSS. A ideia é garantir que as imagens sejam exibidas corretamente em diferentes dispositivos e tamanhos de tela, mantendo um design visualmente agradável e sem distorções.

Vamos abordar diferentes técnicas CSS, onde utilizaremos as propriedades object-fit e object-position com foco na responsividade, melhores práticas e otimização.

Por que Fazer Crop de Imagens Responsivas?

• Melhorar a Estética do Site: O crop permite destacar áreas importantes da imagem e ocultar partes irrelevantes, garantindo um layout mais profissional.

• Adaptabilidade em Diferentes Dispositivos: Em dispositivos móveis ou telas menores, o crop responsivo ajuda a manter proporções adequadas e evita que a imagem pareça esticada ou cortada de forma inadequada.

• Reduzir Esforço Manual: Técnicas automáticas de crop via CSS eliminam a necessidade de editar manualmente imagens para cada resolução.

• Otimizar Performance e UX (User Experience): Ao aplicar cortes precisos e responsivos, você melhora a experiência do usuário e reduz o impacto visual causado por imagens mal ajustadas.

Definições

object-fit

A propriedade CSS object-fit controla como o conteúdo de um elemento como <img> ou <video> se ajusta ao contêiner (espaço) que o abriga, sem alterar suas proporções originais. O contêiner a ser criado, possui dimensões pré estabelecidas, que podem ser fixas ou proporcionais (responsivas).

object-fit: cover

• A imagem será redimensionada para preencher completamente o contêiner, preservando suas proporções.
• Pode cortar partes da imagem para evitar espaços vazios.

img {
    object-fit: cover;
}

object-position

A propriedade object-position no CSS é usada para controlar o posicionamento do conteúdo dentro de um contêiner quando a propriedade object-fit está em uso.

Valores Comuns

object-position: center; (Padrão)

• Centraliza o conteúdo no contêiner (opcional). Não é necessário incluir no código.

object-position: top;  // Foca na parte superior do conteúdo.

object-position: bottom; //Foca na parte inferior.

object-position: left; //Foca no lado esquerdo.

object-position: right; //Foca no lado direito.

object-position: 50% 0%; // Valor customizado

object-position: top right; // Valor customizado

• • Primeiro valor: posição horizontal (esquerda para direita).
  • Segundo valor: posição vertical (cima para baixo).

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top; /* Foca na parte superior da imagem */
}

Exemplos de crop (imagem com altura maior que a largura)

Nos exemplos a seguir, vamos cortar uma imagem, cuja a altura é maior que a largura, de forma que ela se ajuste em um espaço (coantêiner) pré definido. Isso é muito utilizado em templates responsivos de sites, como apresentação de artigos, por exemplo.

Primeiro, veja a seguir a imagem origial que utiizaremos:

Bill Ward

No primeiro exemplo, vamos cortar a imagem de forma centralizada e no segundo exemplo vamos cortar a imagem apenas na parte inferior, preservando a parte principal da imagem que é o rosto do artista.

1º Exemplo, corte centralizado

HTML

<div class="image-container">
    <img src="https://raterock.me/assets/images/members/Bill%20Ward.jpg" alt="Descrição da imagem">
</div>

CSS

.image-container {
    max-width: 270px; /* Largura do corte */
    height: 200px; /* Altura do corte */
    overflow: hidden; /* Garante que a imagem cortada não exceda o contêiner */
    border-radius: 8px; /* Opcional: bordas arredondadas */
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta a imagem ao contêiner */
}

Veja o resultado:

See the Pen Crop - altura maior largura - centralizado by Angelo Luis Ferreira (@angeloalf) on CodePen.

Explicando o código:

HTML

<div class="image-container">:

• Este contêiner deve ser criado e usado como um elemento pai para envolver a imagem.
• Ele define as dimensões do corte (definido no CSS) e controla como a imagem será exibida.

CSS

Estilos do Contêiner (.image-container)

max-width: 270px;

• Define a largura máxima do contêiner.
• Responsivo se for usado junto com width: 100% (img); ou em layouts fluidos.

height: 200px;

• Define a altura fixa do contêiner para criar o corte.

overflow: hidden;

• Garante que qualquer parte da imagem que ultrapasse os limites do contêiner seja cortada (não visível).

border-radius: 8px (opcional);

• Adiciona bordas arredondadas ao contêiner para um visual mais moderno.

Estilos da Imagem (.image-container img)

width: 100%;

• Faz com que a imagem se ajuste à largura do contêiner, independentemente do tamanho original da imagem.

height: 100%;

• Faz com que a imagem se ajuste à altura do contêiner, garantindo que ela sempre cubra totalmente o espaço disponível.

object-fit: cover;

• Este é o ponto principal que garante o corte responsivo:
  • A imagem é redimensionada para cobrir completamente o contêiner.
  • Mantém as proporções da imagem original (sem distorções).
  • Partes da imagem que não cabem no contêiner são cortadas, garantindo que o foco principal seja preservado.

Como Funciona Juntos

• O contêiner (.image-container) define as dimensões visíveis (270px de largura por 200px de altura) e oculta o excedente da imagem com overflow: hidden.
• A imagem é ajustada proporcionalmente dentro do contêiner:
  • Com object-fit: cover, a imagem cobre totalmente o espaço do contêiner, cortando as áreas extras nas bordas se necessário.
• O resultado é uma imagem responsiva que se adapta ao tamanho do contêiner, mantendo suas proporções originais e um corte harmonioso.

2º Exemplo, corte parte inferior da imagem

HTML

<div class="image-container">
    <img src="https://raterock.me/assets/images/members/Bill%20Ward.jpg" alt="Descrição da imagem">
</div>

CSS

.image-container {
    max-width: 270px; /* Largura total ou ajustável */
    height: 200px; /* Altura desejada (corte aplicado na parte inferior) */
    overflow: hidden; /* Oculta a parte inferior excedente */
    border-radius: 8px;
}

.image-container img {
    width: 100%; /* Ajusta a largura ao contêiner */
    height: 100%; /* Preenche a altura do contêiner */
    object-fit: cover; /* Ajusta a imagem ao contêiner, mantendo proporções */
    object-position: top; /* Foca na parte superior da imagem */
}

Veja o resultado:

See the Pen Crop - altura maior largura - inferior by Angelo Luis Ferreira (@angeloalf) on CodePen.

Explicando o código: Observe que utilizamos o mesmo código do exemplo anterior, porém adicionamos apenas a propriedade object-position que irá controlar a posição da imagem no contêiner.

• object-position: top;
  • object-position controla qual parte da imagem será visível após o corte.
  • top foca na parte superior da imagem, cortando a parte inferior quando necessário.

Tente você mesmo

Veja no nosso editor Squids HTML os exemplos acima. 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 »

Exemplos de crop (imagem com largura maior que a altura)

Vamos agora exemplificar como cortar uma imagem cuja a largura é maior que a altura, de forma que ela se ajuste em um contêiner pré definido.

Veja a seguir a imagem origial que vamos utilizar em nossos exemplos:

No primeiro exemplo, vamos cortar a imagem de forma centralizada e no segundo exemplo vamos cortar a imagem apenas na parte direita, preservando a parte principal da imagem.

1º Exemplo, corte centralizado

HTML

<div class="image-container">
    <img src="https://www.visualdicas.com.br/images/banners/banner1.webp" alt="Descrição da imagem">
</div>

CSS

.image-container {
    max-width: 270px; /* Largura do corte */
    height: 200px; /* Altura do corte */
    overflow: hidden; /* Garante que a imagem cortada não exceda o contêiner */
    border-radius: 8px; /* Opcional: bordas arredondadas */
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta a imagem ao contêiner */
}

Veja o resultado do nosso exemplo:

See the Pen crop - largura maior que altura - centralizada by Angelo Luis Ferreira (@angeloalf) on CodePen.

Explicando o código: Observe que o código é exatamento o mesmo quando utilizamos imagens com altura maior que a largura.

2º Exemplo, corte na parte direita da imagem

HTML

<div class="image-container">
    <img src="https://www.visualdicas.com.br/images/banners/banner1.webp" alt="Descrição da imagem">
</div>

CSS

.image-container {
    max-width: 270px; /* Largura do corte */
    height: 200px; /* Altura do corte */
    overflow: hidden; /* Garante que a imagem cortada não exceda o contêiner */
    border-radius: 8px; /* Opcional: bordas arredondadas */
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta a imagem ao contêiner */
    object-position: left; /* Foca na parte esquerda da imagem */
}

Veja o resultado do nosso exemplo:

See the Pen crop - largura maior que altura - corte na parte direita by Angelo Luis Ferreira (@angeloalf) on CodePen.

Explicando o código: Para fazer o corte na parte direita da imagem, utilizamos a propriedade object-position que irá controlar a posição da imagem visível no contêiner.

• object-position: left;
  • object-position controla qual parte da imagem será visível após o corte.
  • left foca na parte esquerda da imagem, cortando a parte direita quando necessário.

Tente você mesmo

Veja no nosso editor Squids HTML os exemplos acima. 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 »