Joomla.it Forum

Joomla! 3 => Joomla! 3 => Topic aperto da: Stefano Meloni - 16 Dic 2016, 17:43:17

Titolo: Immagini responsive in un articolo [RISOLTO]
Inserito da: Stefano Meloni - 16 Dic 2016, 17:43:17
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....
Titolo: Re:Immagini responsive in un articolo
Inserito da: Francesco Di Giovanni - 16 Dic 2016, 18:37:50
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

 ;)
Titolo: Re:Immagini responsive in un articolo
Inserito da: Babyjoomla - 16 Dic 2016, 22:16:32
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. (https://www.youtube.com/watch?v=MaTa0RMHyGw)

Ciao
Titolo: Re:Immagini responsive in un articolo
Inserito da: Stefano Meloni - 21 Dic 2016, 09:59:23
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... :(
Titolo: Re:Immagini responsive in un articolo
Inserito da: Stefano Meloni - 24 Dic 2016, 08:44:21
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  ;D ;D ;D ;D