Como Redimensionar Imagens Apenas com CSS ~ SobMedida Tutoriais

Beleza, pessoal? Hoje aprenderemos a limitar o tamanho de imagens dentro do nosso site, utilizando apenas CSS. Poderemos, inclusive, aplicar outros efeitos, tais como sombras, bordas arredondadas, etc., sem precisar editar a imagem num programa com o Photoshop, por exemplo. Então, mãos à obra.

O processo é algo muito fácil, e tendo uma noção simples de CSS já dá pra pegar o jeito. O que faremos é configurar a width (largura) e height (altura) da tag <img />, que é a responsável por fazer o navegador entender que ali temos uma imagem. Isso fará com que a imagem se redimensione automaticamente para as proporções configuradas.

Mas só isso? Sim! Mas então pra que um tutorial pra fazer isso? Há um tempo eu estava escrevendo um código e me veio essa dúvida na cabeça, procurei muito mas nenhuma proposta que eu encontrei solucionou meu problema, e resolvi testar isso, com a certeza de que a imagem seria cortada e eu teria que procurar mais. E, para minha surpresa e alegria, aconteceu justamente o que eu estava precisando.

Sem mais delongas, vamos ao código. Abra seu editor preferido, insira as tags do HTML, se você não sabe quais são, leia a Parte 1 da série Aprenda HTML e CSS na Prática. E, dentro de <body></body> vamos colocar uma imagem, com o código abaixo.

<div class="img-teste">
    <img src="images/1.jpg" border="0" />
</div>

Agora, dentro da tag <head></head> coloque o CSS para configurar o tamanho da imagem, como abaixo.

<style type="text/css">
*{
margin: 0;
padding: 0;  /* CSS Reset */
}
 
body{
text-align: center;  /* Centraliza todo o conteudo */
}
 
.img-teste img{
width: 500px;    /* largura da imagem */
height: 350px;   /*  altura da imagem  */
margin-top: 10px; /* margem do topo */
}
</style>

Todas as imagens que estejam dentro de uma <div class="img-teste"> terão as configurações acima. Caso você queria que todas as imagens do seu site tenham essa configuração, basta fazê-la diretamente na tag img, no CSS, como abaixo:

img{
width: 500px;
height: 350px;
}

Quando configuramos uma tag de forma geral, como fizemos acima, todas as tags do site, por padrão terão essas configurações, a menos que você faça diferente em alguma tag específica. Por exemplo, se juntássemos o primeiro CSS mostrado com esse segundo, todas as imagens do site teriam a configuração do segundo código, exceto as que estivessem dentro da tag <div class="img-teste"></div>. Ficou dificil entender? Então copie ou escreva o código abaixo no seu arquivo .html, faça as devidas alterações e veja a diferença.

<html>
<head>
<title>TESTE DE IMAGEM</title>
 
<style type="text/css">
*{
margin:0;
padding:0;
}
 
body{
text-align:center;
}
 
img{
width: 200px;
height: 200px;
margin-top: 10px;
}
 
.img-teste img{
width: 500px;
height: 350px;
margin-top: 10px;
}
 
</style>
</head>
 
<body>
<div class="img-teste">
    <img src="LINK-DA-SUA-IMAGEM-1" border="0" />
</div><!-- .img-teste -->
 
<img src="LINK-DA-SUA-IMAGEM-2" border="0" />
</body>
</html>

Troque as imagens de lugar para visualizar melhor.

Legal né? Quando utilizamos essa customização diretamente na tag img, nós não "cortamos" a imagem, e sim a ajustamos de acordo com nossa necessidade. Isso nos tira o trabalho de ter que redimensionar as imagens do site manualmente em um programa como o Photoshop, por exemplo.

Espero que tenham gostado, até a próxima.

5 comentários:

AStralzinha21 de agosto de 2015 às 09:33
Muito bom o estilo que você usou foi dropado ne, o style na mesma pagina do html
ResponderExcluir
Respostas
Unknown2 de maio de 2016 às 09:46
#foto { display: block; height: 400px;

O meu plano de fundo da div coloquei assim e a imagem fica repetindo background-image:url(img/cavalo.jpg);background-position: center;

background-repeat: no-repeat; margin-top: 15px; border-radius: 8px;}
ResponderExcluir
Respostas
Unknown2 de maio de 2016 às 09:46
#foto { display: block; height: 400px;

O meu plano de fundo da div coloquei assim e a imagem fica repetindo background-image:url(img/cavalo.jpg);background-position: center;

background-repeat: no-repeat; margin-top: 15px; border-radius: 8px;}
ResponderExcluir
Respostas
Unknown22 de fevereiro de 2017 às 18:23
não estou conseguindo ajustar a imagem no site http://wljunior.com
ResponderExcluir
Respostas
Unknown1 de junho de 2021 às 07:25
Show, me ajudou com css.
ResponderExcluir
Respostas

Como Redimensionar Imagens Apenas com CSS

5 comentários:

Busca

ESTAMOS RECRUTANDO!!

Posts Populares