Imagens responsivas no corpo da matéria do blog

  • Sergio Silva

    (@ergioobertoilva)


    9 anos, 11 meses atrás

    Pessoal, minha dúvida sei que é básica, mas gostaria da ajuda de vocês.

    É o seguinte: desenvolvi um tema do zero (assistindo alguns vídeos no youtube). Eu gostaria que as imagens que eu postasse no corpo de uma matéria qualquer, ali junto do texto, ficassem responsivas para se adaptarem as mais diversas resoluções de tela. Existe algum código para isso, ou plugin?

    No momento, sempre que eu posto uma imagem na matéria eu altero seu width para 100%, e isto vem me quebrando um galho, mas o ideal é que isso fosse automático. Deste já, obrigado!

Visualizando 6 respostas - 1 até 6 (de um total de 6)
  • matheuscl

    (@matheuscl)

    9 anos, 11 meses atrás

    Como seu tema foi desenvolvido por você mesmo da pra alterar o estilo da tag direto pelo css do tema e deixar com width: 100%;.

    Moderador Felipe Elia

    (@felipeelia)

    9 anos, 11 meses atrás

    Só complementando a resposta do @matheuscl com uns detalhes bobos, o ideal seria usar as seguintes propriedades e valores no CSS:

    .post img {
    max-width: 100%;
    height: auto;
}

    Trocar o width por max-width vai garantir que a imagem com largura menor não seja “esticada” para a largura total e perca resolução e o height:auto evita que a imagem ocupe a largura toda do elemento, mas continue com a altura do atributo height da tag . Com o height:auto você consegue garantir que ela fique com a largura total, mas com altura proporcional 🙂

    Criador do tópico Sergio Silva

    (@ergioobertoilva)

    9 anos, 11 meses atrás

    Valeu, pessoal! Vou testar aqui. 🙂

    Criador do tópico Sergio Silva

    (@ergioobertoilva)

    9 anos, 11 meses atrás

    Testei a sugestão do Felipe, mas ocorreu um erro: a imagem até fica com a largura em 100%, porém ela ultrapassa o tamanho co container, que possui 800px de largura.

    A imagem que testei tem 1200px, e, ao invés de se adaptar ao container de 800px, ficou com seu tamanho original. 🙁

    Moderador Felipe Elia

    (@felipeelia)

    9 anos, 11 meses atrás

    @ergioobertoilva, a gente pode ver isso online em algum lugar? A declaração do CSS que eu coloquei (.post img) é só um exemplo, você vai precisar adaptar o .post para a classe do container, certo?

    Criador do tópico Sergio Silva

    (@ergioobertoilva)

    9 anos, 11 meses atrás

    Sim, adaptei para o meu container… e já descobri o erro: foi mera desatenção minha, eu usei .container img{}, mas meu container está setado como uma div, e não como uma class, aí não ia dar certo mesmo hehehe Agora está tudo certo.

    Valew, Felipe e Matheus!

Visualizando 6 respostas - 1 até 6 (de um total de 6)

O tópico ‘Imagens responsivas no corpo da matéria do blog’ está fechado para novas respostas.