Como recortar uma imagem no HTML
Neste artigo vamos aprender como recortar uma imagem no HTML, ou seja, ela preencherá nosso container de forma perfeita sem distorção.
Fala programador(a), beleza? Bora aprender coisa nova
Muitas vezes precisamos inserir imagens em divs, e nem sempre as imagens ficam corretamente posicionadas
E também podem até distorcer, pois não são do mesmo tamanho
Então com um pouco de CSS no nosso HTML, podemos resolver este problema
A ideia central é adicionar a imagem ao background de uma div, por CSS
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
E desta maneira, nunca ficará distorcida, pois a imagem fica como plano de fundo e não limitada a largura e altura da div
Vamos ver na prática, segue o HTML:
<!DOCTYPE html>
<html>
<head>
<title>Como recortar uma imagem no HTML</title>
<meta charset="utf-8">
</head>
<body>
<div id="container"></div>
</body>
</html>
Agora vamos ao CSS, que vai inserir a imagem no fundo da div:
#container {
width: 1200px;
height: 400px;
background-image: url('./bg-img.jpg');
}
Teremos este resultado:
Veja que a imagem não distorce a largura do container é respeitada, podemos também reposicionar esta imagem, veja:
#container {
width: 1200px;
height: 400px;
background-image: url('./bg-img.jpg');
background-position: -100px -450px;
}
Resultado:
Ou deixar ela se adaptar ao espaço que temos:
#container {
width: 1200px;
height: 400px;
background-image: url('./bg-img.jpg');
background-size: cover;
}
Resultado:
A propriedade background-size com valor de cover, faz essa adaptação da imagem para nós
Teste também outros valores para a background-position e o background-size
Você pode achar um que se alinhe melhor as necessidades do seu projeto
Conclusão
Neste artigo vimos como recortar uma imagem no HTML, mas na verdade usamos CSS para isso 😀
Em vez de utilizar a tag img, é sempre bom pensar na possibilidade do background-img
Que resolve estes casos onde a imagem distorce, por causa da incompatibilidade de tamanho das divs
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 473 aulas
- 20 projetos
- 39h 26min
Blog | Mais populares
As diferenças de var, let e const
Como fazer redirecionamento com PHP
Neste artigo você vai aprender a como fazer redirecionamento com PHP, utilizaremos abordagens fáceis de entender e de aplicar Fala programador(a), beleza? Bora aprender mais […]
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação
Checklist de segurança n8n VPS pública: guia essencial para proteger sua instalação A popularidade da automação de processos com o n8n está em alta, principalmente […]
