Imagem com Largura Total da Área de Posts


Oie...recebi um pedido para fazer um tutorial sobre como deixar as imagens da mesma largura que a área de postagem, e é sobre isso este post. Antes de começar, você deve saber a largura dos seus posts ou definí-la (veja o trecho area da postagem nos códigos com estilos prontos para posts e sidebar que fiz para ver como adicionar uma largura na postagem: click!).
Vou mostrar duas formas de fazer isso...

Exemplo de como ficará usando os códigos abaixo

A primeira fará com que todas as imagens tenham a largura especificada, ou seja, se você usar imagens pequenas, gifs e ícones em seu blog, melhor não aplicar esse CSS pois ficarão feias. No exemplo, vou usar a área do meu blog, em que os posts tem 650px de largura; cole o código antes de </b:skin>:
 .post a img, .post img {
width: 680px;
height: auto;
padding: 0;
margin: 0px -40px 0px -40px;
border: none;
} 

Width é a largura da imagem, que você vai alterar mudando o número até ficar do tamanho dos seus posts; margin: 0px -40px 0px -40px; é o que faz a imagem ficar bem no limite da postagem, você pode alterar o -40 por outro número negativo que se adeque ao seu modelo. Height: auto; e border: none; significam que a imagem terá altura estabelecida automaticamente e nenhuma borda.
***
Caso você queira que apenas a primeira imagem ou alguma imagem específica tenha largura total do post, use esse CSS antes de </b:skin>:
 .primeiraimagem {
width: 680px;
height: auto;
padding: 0;
margin: 0px -40px 0px -40px;
border: none;
} 

Alterando conforme preciso; nesse caso, o ideal é não definir largura para todas as imagens, e quando for usar a imagem em questão, cole na área de HTML da postagem isso:
 <img class='primeiraimagem' src="URL-DA-IMAGEM"/> 

Fácil né. O legal é que se pode adaptar, aplicar em outros elementos; você poderá obter o mesmo resultado se, por exemplo, usar em um título; seria mais ou menos assim:
.post h3 a, .post h3 a:visited, .post h3, .comments h4 {
background: #cor-do-background;
width: 700px;
height: auto;
padding: 0;
margin: 0px -25px 0px -25px;
}
E o título ocuparia a área total com relação a largura :D Vá editando o código e obtendo os resultados que desejar de diversas formas; ah sim! O ponto de partida para que eu pudesse entender esse CSS foram o site Difluir e o blog da Camila. Lá no Difluir tem um template pronto, gratuito, com esse estilo nas postagens.
Espero que tenha ajudado vocês.
Imagens: Weheartit.com






Postar um comentário

6 Comentários

  1. Obrigada Roberta! seus tutoriais sempre me ajudam muito beijos!

    ResponderExcluir
  2. Muito obrigada! Procurava por esse tutorial faz tempo!
    diveinthis.blogspot.com

    ResponderExcluir
  3. Esse tutorial salvou meu dia rsrs sempre encontro tudo no seu blog. Parabéns!!

    http://www.manequim-alternativo.com

    ResponderExcluir
  4. Muito obrigadaaa!!! Tava desesperada tentando arrumar isso e não conseguia de jeito nenhum! <3 salvou meu blog! Hhahahah


    www.nathaliaorige.com

    ResponderExcluir
  5. Salvou minha vidaaaaa
    Amei, muito obrigada ♥

    ResponderExcluir
  6. Anônimo02 março

    Que lindo seu blog! To apaixonada ♥

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up