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
Formação Claude Code
Domine Claude Code do absoluto zero até o avançado
- 116 aulas
- 4 projetos
- 9h 23min
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:
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
Matheus Battisti
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Blog | Mais populares
Tags HTML: comandos e códigos básico a avançado
O conhecimento das principais tags HTML é vital para qualquer programador front-end, pois elas são a base da estrutura de qualquer página web. O HTML […]
Como fazer um select mudar de URL/link
Como fazer input de password com olho de mostrar senha
O que é o input type password? Antes de sair codando, bora entender a base O input type password é o campo de senha do […]
