13.03.2025

Exibindo uma Parte Específica de uma Imagem em HTML e CSS

Resposta Rápida

Se você precisa exibir apenas um determinado segmento de uma imagem, pode usar a propriedade clip-path do CSS ou colocar a imagem em um div com overflow: hidden;. Veja como funciona o método de overflow:

<div style="width: 200px; height: 150px; overflow: hidden;">
  <img src="imagem.jpg" style="position: relative; left: -50px; top: -100px;">
</div>

Criamos uma área de visualização de 200x150 pixels, e com as propriedades left e top, podemos ajustar a parte visível da imagem.

Usando clip-path

A propriedade clip-path permite a criação de várias formas, incluindo círculos, elipses e polígonos, o que amplia as possibilidades de exibição criativa das imagens. Diferentes formas são suportadas, adicionando originalidade à imagem:

.circular-clip {
  clip-path: circle(50% at center);
}

É importante considerar o contexto do seu elemento HTML. Elementos de bloco como div ou p, e elementos inline como span podem se comportar de maneira diferente quando recortados. Testar implementações em diferentes navegadores ajudará a garantir uma experiência de usuário consistente.

Experimentando com Fundos em CSS

Outra abordagem é usar uma imagem como fundo de um contêiner, controlando as propriedades background-size e background-position:

.image-section {
  width: 50px;  /* A largura é obrigatória */
  height: 50px; /* A altura também é importante */
  background-image: url('imagem.jpg'); /* O destaque da nossa apresentação - a imagem */
  background-repeat: no-repeat; /* Desabilitando a repetição */
  background-size: cover; /* Preenchendo todo o espaço disponível */
  background-position: center;  /* Centralizando a imagem */
}

A propriedade background-position permite focar em diferentes áreas da imagem, sendo útil para modificar soluções visuais.

SVG e clip-path: Um Novo Nível

Usar SVG com clip-path combinado com a função 'url' oferece a capacidade de criar caminhos de recorte únicos. Defina o caminho necessário em SVG e aplique-o no CSS:

<svg width="0" height="0">
  <defs>
    <clipPath id="svgClip">
      <!-- Seu campo criativo: defina o caminho de recorte -->
      <circle cx="50" cy="50" r="50" />
    </clipPath>
  </defs>
</svg>

<div style="clip-path: url(#svgClip);">
  <img src="imagem.jpg">
</div>

Tanto SVGs locais quanto externos são suportados, tornando clip-path uma ferramenta valiosa com muitas aplicações para criar soluções de design excepcionais.

Adaptando-se a Diferentes Navegadores e Dispositivos

Não se esqueça de testar em vários navegadores e em diferentes dispositivos para garantir uma experiência de usuário estável e evitar surpresas desagradáveis. Recursos como Can I Use podem te ajudar a se manter informado sobre compatibilidade.

Visualização

Imagine o processo de recorte de uma imagem em HTML/CSS como se você estivesse trabalhando em uma obra-prima no campo das artes visuais:

Você encontrou uma galeria de arte 🎨 com uma pintura magnífica 🖼️, mas quer mostrar apenas uma parte dela:

Exibição completa:      [🌅🌄🌆🏙️]  
Fragmento selecionado:   [🌄]

Ao aplicar CSS, você destaca a área desejada:

.frame {
  width: 100px;  /* Definindo limite de largura */
  height: 100px; /* E altura */
  overflow: hidden; /* Filtrando excessos */
}

.picture {
  position: relative;
  left: -50px;  /* Definindo o deslocamento horizontal */
  top: -50px;   /* E o deslocamento vertical */
}

Agora este fragmento da sua obra-prima está pronto:

[🖼️] ➡️ [🖼️🖽] ➡️ `[🌄]`

Agora, um belo nascer do sol 🌄 brilha na sua tela. Quem diria!

clip-path vs Posicionamento

Ao usar clip-path, certifique-se de que a forma e a região de recorte correspondam às dimensões da imagem. Métodos com position: absolute; funcionam muito bem com overflow: hidden para configurações básicas, mas limitam suas opções em comparação ao que clip-path oferece plenamente.

É crucial entender claramente o fluxo de elementos e como usar clip-path junto com position: relative; dentro de sistemas flex e grid.

A propriedade CSS clip é considerada obsoleta, tornando clip-path a escolha ideal para o desenvolvimento web moderno e responsivo.

Recursos Úteis

1. object-fit | CSS-Tricks — Uma discussão sobre a propriedade object-fit para controlar a exibição de imagens.
2. Diversão com Unidades de Viewport | CSS-Tricks — Explorando unidades de viewport (vh, vw, vmin, vmax) para design responsivo.
3. Imagens Responsivas | MDN — Um guia sobre o atributo srcset para criar imagens responsivas.
4. mix-blend-mode | MDN — Técnicas para mesclar imagens de fundo usando CSS.
5. position | MDN — Entendendo posicionamento de elementos em CSS.
6. Um Guia Completo para Flexbox | CSS-Tricks — Um guia abrangente sobre técnicas de Flexbox em CSS.
7. A Propriedade Z-Index do CSS | Smashing Magazine — Uma explicação sobre a propriedade z-index em CSS.

Video

Navigation