Autore Topic: Immagini responsive in un articolo [RISOLTO]  (Letto 2312 volte)

Offline Stefano Meloni

  • Nuovo arrivato
  • *
  • Post: 14
  • Sesso: Maschio
    • Mostra profilo
Immagini responsive in un articolo [RISOLTO]
« il: 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....
« Ultima modifica: 24 Dic 2016, 08:44:50 da Stefano Meloni »

Offline Francesco Di Giovanni

  • Esploratore
  • **
  • Post: 136
  • Sesso: Maschio
    • Mostra profilo
Re:Immagini responsive in un articolo
« Risposta #1 il: 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

 ;)
« Ultima modifica: 16 Dic 2016, 18:41:23 da Francesco Di Giovanni »

Offline Babyjoomla

  • Esploratore
  • **
  • Post: 180
  • Nuovo in joomla!
    • Mostra profilo
Re:Immagini responsive in un articolo
« Risposta #2 il: 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.

Ciao
« Ultima modifica: 16 Dic 2016, 22:25:08 da Babyjoomla »

Offline Stefano Meloni

  • Nuovo arrivato
  • *
  • Post: 14
  • Sesso: Maschio
    • Mostra profilo
Re:Immagini responsive in un articolo
« Risposta #3 il: 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... :(

Offline Stefano Meloni

  • Nuovo arrivato
  • *
  • Post: 14
  • Sesso: Maschio
    • Mostra profilo
Re:Immagini responsive in un articolo
« Risposta #4 il: 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

 

Host

Torna su