Joomla.it Forum

Joomla! 3 => Joomla! 3 => : Stefano Meloni 16 Dec 2016, 17:43:17

: Immagini responsive in un articolo [RISOLTO]
: Stefano Meloni 16 Dec 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....

: Re:Immagini responsive in un articolo
: Francesco Di Giovanni 16 Dec 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

 ;)

: Re:Immagini responsive in un articolo
: Babyjoomla 16 Dec 2016, 22:16:32

Ciao Stefano,

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

:

<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

: Re:Immagini responsive in un articolo
: Stefano Meloni 21 Dec 2016, 09:59:23

: Francesco Di Giovanni  16 Dec 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

 ;)

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... :(

: Re:Immagini responsive in un articolo
: Stefano Meloni 24 Dec 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