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.