Joomla.it Forum
Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => : sdenghete 24 Jan 2014, 19:55:17
-
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
-
Una soluzione potrebbe essere quella di impostare la dimensione dell'immagine in em, mi spiego meglio..
Invece di dare dimensioni tipo
<img src="logo.gif" width="224px" height="69px" />
Le inserisci in questo modo...
<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]
-
ciao, grazie per il consiglio.
Ho provato ma purtroppo non funziona... :-\
hai qualche idea in proposito?
grazie
-
puoi adottare lo stesso metodo che adotta il twitter bootstrap, ovver oassegnare alle immagini una classe "resp" e poi nel css inserisci questo codice:
.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:
.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
-
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?
-
<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
-
...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]
-
meglio alla fine di tutto, almeno lo ritrovi facilmente
-
Funziona! Grazie!!!!! ;D