Show mobile image when it exists

Navigation
2

Hello,

I have a% of my own% and I coded a feature to allow, in addition to the upload of standard size image, a second image CMS that will be shown with media query when the resolution is less than mobile , so it includes the "mobile" class. Today the system continues to display the default image, setting it responsively with 768px .

As soon as I publish this functionality to the production environment, I would like the images that already exist and are in the air, to continue to work with the responsive, and only when there is a mobile image, does it appear in place.

See below for simplified html and css 

<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; 
    }
}

My question is, is there a way to do this without using bootstrap ? Remember that it is a javascript and all CMS is stored in the database.

    
asked by anonymous 03.06.2015 / 21:45

1 answer

1

Old images are also wrapped by div.image-container (I guess not, because your code would already work)? If so, you can simply use another class (e.g. image-responsive-container ) for these new responsive images; so your new styles will not apply to the old images and you can create mobile versions of the images that are already in the system bit by bit.

    
03.06.2015 / 21:56
Disable Scrollbar from a Form MDI Container Run Java Method from Time to Time - Run Periodically