[Risolto]joomla 2.5 inserire immagine flessibile o fluida in articolo

[sdenghete]

Ciao, in un articolo vorrei inserire una immagine flessibile, in modo che possa ridimensionarsi secondo lo schermo usato (ad esempio se si usa il telefonino piuttosto che un PC). Come posso fare?
grazie

[otto9due]

Una soluzione potrebbe essere quella di impostare la dimensione dell'immagine in em, mi spiego meglio..
Invece di dare dimensioni tipo

Codice: [Seleziona]

<img src="logo.gif" width="224px" height="69px" />


Le inserisci in questo modo...

Codice: [Seleziona]

<img src="logo.gif" width="224em" height="69em" />
In questo formato puoi inserire anche valori del tipo 0.75em ecc... e sopratutto puoi applicarlo anche al testo..
In teoria servirebbe a diminuire o aumentare dimensioni in "relazione" ad altre assegnate.. ma dovrebbe funzionare..

Prova un pò.. Qualora non dovessi riuscire tramite editor, prova a inserirle disattivando l'editor e modificandole nel codice..[/code]

[sdenghete]

ciao, grazie per il consiglio.
Ho provato ma purtroppo non funziona... 
hai qualche idea in proposito?
grazie

[giovi]

puoi adottare lo stesso metodo che adotta il twitter bootstrap, ovver oassegnare alle immagini una classe "resp" e poi nel css inserisci questo codice:

Codice: [Seleziona]

.resp{display:block; max-width:100%;}in questo modo l'immagine si riduce se lo spazio a disposizione è più piccolo ma non si ingrandirà più della sua reale dimensione. Se invece vuoi che diventi anche più grande allora usi quest'altro cdice:

Codice: [Seleziona]

.resp{display:block; width:100%;}

Occhio ad usare la tecnica di ridimensionamento delle immagini in quanto molti browser ne rovinano la qualità non esendo le immagini jpg e gif (e forse neanche i png) destinate a questo scopo. Potresti avere perdite di qualità anche significative

[sdenghete]

perdona l'ignoranza.    Ho provato ma mi sono un po incartato....
se questo è il codice:
<p><img src="images/banners/home-page.png" border="0" alt="" /></p>
come lo devo modificare?

[giovi]

Codice: [Seleziona]

<p><img src="images/banners/home-page.png" border="0" alt="" class="resp" /></p>
Poi via ftp vai in templates/nome-del-template/css/template.css ed inserisci in fondo al file uno dei due codici che ti ho postato precedentemente

oppure in gestione estensioni->gestione template->templates->nome-del-template fai la stessa cosa modificando il file template.css

[sdenghete]

...alla fine di tutto il file css o alla fine di una sezione specifica del css tipo:

/* COMMON STYLE
/* FORM
/* -- EDITOR STYLES ----------------------------- */

/* JOOMLA STYLE [size=78%]--------------------------------------------------------- */[/size]
/* Pagination ---*/

/* MODULE STYLES [size=78%]--------------------------------------------------------- */[/size]

/* MAIN LAYOUT DIVS [size=78%]--------------------------------------------------------- */[/size]

/* HEADER [size=78%]--------------------------------------------------------- */[/size]

/* NAVIGATION [size=78%]--------------------------------------------------------- */[/size]

/* MASSHEAD [size=78%]--------------------------------------------------------- */[/size]

[size=78%]ect ect?[/size]

[giovi]

meglio alla fine di tutto, almeno lo ritrovi facilmente

[sdenghete]

Funziona! Grazie!!!!!