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 Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
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 SAAS com IA
Tire usas ideias do papel criando softwares com IA, integre pagamentos e lance seu projeto!
- 291 aulas
- 18 projetos
- 24h 17min
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 […]
ChatGPT: o que é, como usar, dicas e como acessar login
ChatGPT é uma ferramenta de processamento de linguagem natural (NLP) baseada na arquitetura GPT-3.5, desenvolvida pela OpenAI. Sua criação representa um marco significativo no campo […]
