Cássio Fabre
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.
Muito bom o estilo que você usou foi dropado ne, o style na mesma pagina do html
ResponderExcluir#foto { display: block; height: 400px;
ResponderExcluirO 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;}
#foto { display: block; height: 400px;
ResponderExcluirO 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;}
não estou conseguindo ajustar a imagem no site http://wljunior.com
ResponderExcluirShow, me ajudou com css.
ResponderExcluir