2

Olá,

Tenho um CMS próprio e codifiquei uma funcionalidade para permitir, além do upload de imagem de tamanho padrão, uma segunda imagem mobile que será mostrada com media query quando a resolução for menor que 768px, para isso inclui a classe "mobile". Hoje o sistema continua mostrando a imagem padrão, ajustando-a responsivamente com bootstrap.

No momento que eu publicar essa funcionalidade em ambiente de produção gostaria que as imagens que já existem e estão no ar, continuassem funcionando com o responsivo e somente quando existir uma imagem mobile, ela seja apresentada no lugar.

Veja abaixo o html e css simplificado

<div class="container-image">
    <img src="caminho da imagem padrão" class="show"></img>
    <img src="caminho da imagem mobile" class="show mobile"></img>
</div>

div.container-image img.mobile { display: none; }
@media only screen and (max-width: 768px) {
    div.container-image img.show {
        display: none; 
    }
    div.container-image img.show.mobile   {
        display: block; 
    }
}

Minha dúvida é, existe uma maneira de fazer isso sem usar javascript? Lembrando que é um CMS e todo o html está gravado no banco de dados.

1 Resposta 1

1

As imagens antigas também são envolvidas pelo div.image-container (imagino que não, pois o seu código já funcionaria)? Caso sim, você pode simplesmente usar uma outra classe (e.g. image-responsive-container) para essas novas imagens responsivas; assim os seus novos estilos não vão se aplicar às antigas imagens e você pode criar versões mobile das imagens que já estão no sistema aos poucos.

1
  • Ótima colocação ctgPi, acredito que irá solucionar meu problema. Eu estava desconfiado que era mais um problema de estruturação do que realmente css e js. Obrigado. Commented 3/06/2015 às 20:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .