Immagini responsive in un articolo [RISOLTO]

[Stefano Meloni]

Buongiorno a tutti!


nel mio sito negli articoli creati ho voluto mantenere due immagini appaiate descrittive. C'è un modo per far si che le immagini rimangano appaiate sino a uno schermo maggiore di 1000 px mentre con uno schermo inferiore prendano ognuna il 100% di width??


Pensavo che sopra i 1000 px potessero stare ognuno al 44% di width mentre appunto sotto i 1000 px andarea la 100%...ho provato a smanettare con @media ma senza successo....

[Francesco Di Giovanni]

ciao 
dovresti creare dichiarazione nel tuo file css
tipo cosi
@media only screen and (min-width: 1000px) { .imgprova{ width: 44%; height: auto; }} 
@media only screen and (max-width: 999px) { .imgprova{ width: 100%; height: auto; }}

inserendo nelle immagini la classe del mio esempio tipo imgprova

 

[Babyjoomla]

Ciao Stefano,

prova ad inserire questo codice nell'articolo, renderà le immagini responsive:

Codice: [Seleziona]

<p align="center">
   <img alt="" src="images/image.jpg" style="display: inline;" /></p>
Altrimenti c'è questo tutorial.

Ciao

[Stefano Meloni]

ciao 
dovresti creare dichiarazione nel tuo file css
tipo cosi
@media only screen and (min-width: 1000px) { .imgprova{ width: 44%; height: auto; }} 
@media only screen and (max-width: 999px) { .imgprova{ width: 100%; height: auto; }}

inserendo nelle immagini la classe del mio esempio tipo imgprova

 

Grazie mille per le risposte! proverò con il CSS! nessun problema mettere nel template.css le stringhe...ma poi come inserisco la classe nelle immagini...da editor di articolo o altro...

[Stefano Meloni]

Buongiorno a tutti!


Ho risolto grazie ragazzi! come suggerito ho utilizzato le righe nel mio CSS e creato la classe imgresponsive:


@media only screen and (min-width: 1000px) { .imgresponsive{ width: 44%; height: auto; }}
@media only screen and (max-width: 999px) { .imgresponsive{ width: 100%; height: auto; }}
e poi nell'editor dell'articolo ho semplicemente aggiunto:


img class="imgresponsive"


Ora tutto è perfetto, tutto semplice.. a posteriori