Problemas com Imagem

[Gmartha07 0]

Galera blza??

Pessoal por favor, estou com um problema e não consigo pensar em uma solução para resolver.

Atualmente tenho um site (versão desktop) que está funcionando um script de News que criei em PHP, Mysql.

Para digitar o post eu estou usando o CKEDITOR, e com um plugin do próprio CKEDITOR para incorporar fotos no meio do texto.

O problema é que o site não é responsivo, mas ele possui uma versão mobile, com largura fixa em 320px.

Meu problema é que quando posto essas fotos no corpo da mensagem, na versão desktop o site fica perfeito, porém na versão mobile o layout quebra inteiro.

Alguém tem alguma sugestão para resolver esse problema da versão mobile?

Já defini uma regra de css na versão mobile para Max-Width e Max-Height, porém é imprevisível o tamanho da foto assim que como sua orientação (horizontal ou vertical), tornando difícil deixar a foto com proporções adequadas sem distorcer.

[Beraldo 864]

Ao enviar a imagem, crie cópias dessas imagens, com tamanhos diferentes, cada um para um tamanho de tela

[Gmartha07 0]

Ao enviar a imagem, crie cópias dessas imagens, com tamanhos diferentes, cada um para um tamanho de tela

 

Beraldo Obrigado pela resposta.

 

Mas como eu faria para fotos verticais e horizontais?

E como eu vou fazer para exibir essas fotos com nomes diferentes?

 

Porque a imagem vai estar dentro do conteúdo da postagem.

E já vai com o nome dela..

[Beraldo 864]

É só verificar qual dimensão é maior e fazer alguns cálculos. Eu mostro isso neste artigo

 

 

Quanto ao nome sa imagem, basta pegar o nome e adicionar algum sufixo, como "_thumb", "_mobile", por exemplo

[Maykel-ctba 233]

Talvez não seja a melhor solução, mas insira uma classe CSS para tornar a imagem responsiva.

 

Ex: img-responsive

 

Via FCK Editor, você consegue atribuir uma classe a uma imagem inserida sem problemas.

 

Para saber o que colocar na classe: http://www.w3schools.com/css/css_rwd_images.asp

 

Ou se você utiliza Bootstrap, a classe já é nativa.