Como ter todas as imagens da mesma largura, no blogger


Hoje o post é para ajudar todos aqueles que apesar de não serem designers são muito perfeccionistas no que toca ao layout do blog. Sim, aqueles que gostam de ver as imagens todas com a mesma largura, sem que para isso tenham de passar num programa de edição de imagem para fazer esse trabalho. Neste post vão perceber como é fácil colocar as imagens todas com a mesma largura, no blogger.


.post-body img {
width: 700px;
height: auto;
padding:0px;
}

Com este código que podem ver em cima, estão a dizer ao blogger que querem que as vossas imagens tenham a largura de 700px (este valor varia consoante a largura que vocês quiserem definir, o que importa é mantê-la depois deste momento de decisão, para sermos coerentes), a altura vai ser automática, o que significa que será proporcional à largura, e desta forma não terão imagens distorcidas. O padding vai ser de 0px, ou seja, não terão margens criadas por defeito entre o início do post e a imagem. 

Este código será colado na janela de CSS que já vos foi mostrada aqui noutros posts, que está no Designer de modelos, opções avançadas. Temos duas opções distintas:

Uma das hipóteses é colocar o código onde definimos que a largura é 700px, dessa forma todas as imagens a vão assumir.

.post-body img {
width: 700px;
height: auto;
padding:0px;
}

Outra será a de dizerem que a largura máxima é de 700px, significa que poderão existir imagens mais pequenas mas nunca maiores, o que dá jeito se a maior parte das imagens usadas por vocês não forem da vossa autoria e forem retiradas da internet (não se esqueçam dos créditos), podem ser demasiado pequenas e aumentadas ficarem sem qualidade. Nesse caso vamos optar por manter a largura delas e dizer apenas que não queremos que as imagens ultrapassem uma determinada largura. 

.post-body img {
max-width: 700px;
height: auto;
padding:0px;
}

Esperamos que tenham gostado e que esta dica vos dê muito jeito :)

35 comentários:

  1. Bem, isto é super útil! Mas tenho uma questão!
    As fotos que tiramos com as máquinas fotográficas devem ser muito pesadas para as carregarmos directamente no blog sem as diminuirmos de tamanho, ou não? Se fizermos isso não vamos sobrecarregar o blog e as imagens não vão demorar a aparecer?

    Obrigada! :) **

    ResponderEliminar
    Respostas
    1. Olá Marta ;)

      O nosso conselho é sempre a diminuir um pouco o tamanho das fotos mas como elas já vão ser reduzidas pelo blogger, não é suposto demorar muito tempo a abrir ;)

      beijinhos*

      Eliminar
  2. Muito útil!! E como podemos ter o corpo de texto da largura das imagens?
    Obg!!

    ResponderEliminar
    Respostas
    1. É exactamente o que explicamos em cima, só tens de mudar para a medida da largura o teu texto ;)

      beijinhos

      Eliminar
  3. Óptimo post :) Obrigada.
    A Sofia fez uma boa pergunta... também gostava de saber como deixar o texto da mesma medida das imagens.

    Kiss Kiss
    http://borboletasnolhar.blogspot.pt/

    ResponderEliminar
  4. Foi muito útil, sim. Eu faço (fazia) de outra forma, mas teria que ser a cada fotografia que colocava.
    Muito obrigada
    Cláudia

    ResponderEliminar
    Respostas
    1. Já fiz! Mas deparei-me com um problema :-( O logotipo com link para o Pinterest ficou gigantesco à direita do écran :-(
      Ai ai!!

      Eliminar
    2. tens de utilizar a dica do max-width, se não tudo vai ficar enorme :) assim só as que são maiores é que são reduzidas.

      beijinhos*

      Eliminar
  5. Esta informação é deveras útil! Obrigada pessoal! (^.^) ... E eu que andava com um trabalhão a redimensionar todas as minhas imagens!

    ResponderEliminar
  6. Muito útil, eu fazia o redimensionamento em programa de edição. Obrigado

    ResponderEliminar
  7. também gostava de saber a resposta à pergunta da sofia, se puderem responder :)

    ResponderEliminar
    Respostas
    1. Eu tentei usar o mesmo código, mas não funciona, será que estou a inserir no local errado? Aonde se deve inserir? Obrigada, bjnhs

      Eliminar
  8. aiii mereciam um abraço! deu-me um jeitão :D

    ResponderEliminar
  9. Como é que faço para anular ? coloquei so que no blog nao ficou muito bom :/

    ResponderEliminar
  10. Maravilhoso, seria muito bom um post de como ajustar as imagens ao blog , agradeceria muito : 3

    ResponderEliminar
  11. Olá, fiquei com uma dúvida.
    Quando utilizo o código altera-me o tamanho de todas as imagens do blogue, como posso resolver ?
    Beijinhos, Joana

    ResponderEliminar
  12. Olá ;) tenho este código no meu blogue e em pc's funciona perfeitinho, mas em telemóveis algumas imagens ficam muito grandes. Há alguma forma de corrigir isto ?

    Muito Obrigada,

    Beijinhos

    ResponderEliminar
  13. sou obrigado a comentar... sempre procurei isso. sou contra usar template e finalmente um tutorial que não seja de 2013. Obrigado.

    ResponderEliminar
  14. Ajudou imenso!
    Pena só ter visto agora mas mais vale tarde do que nunca ;)
    bjs
    Cantinho da tequis

    ResponderEliminar
  15. .post-body img {
    width: 710px;
    height: auto;
    padding: 0px;
    margin: 0 -30px 0 -30px; Acrescentem esta linha e mude os valores para ficar corretamente alinhado ao seu texto! DICA EXTRA
    }

    ResponderEliminar
  16. Boa noite!

    Eu experimentei esta diga no meu blog pois um dos posts aparecia automaticamente alinhado com as de cima, mas encolheu na altura, e continua igual. Têm alguma ideia do que eu possa fazer?

    Obrigada!

    ResponderEliminar
  17. Super obrigada! Estive tanto tempo à procura e não encontrava nada do que queria exatamente! Obrigada! kiss^^

    http://somerandomthoughtsandthings.blogspot.com/

    ResponderEliminar
  18. Super obrigada! Estive tanto tempo à procura e não encontrava nada do que queria exatamente! Obrigada! kiss^^

    http://somerandomthoughtsandthings.blogspot.com/

    ResponderEliminar
  19. Uma questão..as imagens do meu blog aparecem todas desfocadas no feed do bloglovin e elas têm sempre boa qualidade no blog. Alguma explicação que conheçam?

    ResponderEliminar
  20. Como faço para alinhar a largura dos textos dos posts à largura das imagens?
    Como você tem aqui no blog?
    Não consigo descobrir :-(
    mariadeferro.blogspot.pt

    ResponderEliminar
  21. O meu não funcionou assim! Tive de colocar mesmo na parte do HTML, dentro das classes de CSS.

    ResponderEliminar