ridurre logo in css nel template responsive?

[giggimix]

Salve c'è un modo per ridurre in logo in base alla dimensione del template responsive?
Grazie Luigi

[Dariodor]

In genere si utilizza del codice javascript per rilevare la grandezza dello schermo ed adattare di conseguenza la dimensione del logo/immagini.

In alternativa puoi dare una dimensione in percentuale, ma non è sempre la soluzione migliore.

[Jing]

Dariodor sai darmi qualche info in più su come fare? potrebbe essere la soluzione ad un problema che ho anche io

[giusebos]

si può fare anche con i css.

una delle strade percorribili è quella di inserire l'immagine in un div con dimensioni max per monitor large, poi via via che il monitor si ridimensiona attraverso le mediaquery si fa in maniera che le dimensioni diminuiscono in %.
nel css specifico dell'immagine andrà imposto un width:100%.

se poi usi un template basato su bootstrap potresti usare una classe tipo questa
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">

che conterrà un div con dentro l'immagine, allora dovrai solo specificare per l'immagine width:100%

[Jing]

Ciao giuse, potresti spiegarmela un pò più nel dettaglio la cosa, io uso Helix3 come template che se non ricordo male è basato su bootstrap. La stringa di codice che mi hai dato dove andrebbe aggiunta? Il logo che voglio modificare è quello del sito sulla barra dei menù.

[tomtomeight]

In quel template se metti il logo nella posizione logo già ottieni il ridimensionamento senza fare altro.

[Jing]

il problema è che non me lo fa e continuo ad avere il logo o enorme e fuori layout o sfocato su mobile

[tomtomeight]

Lo fa se metti le giuste dimensioni e differenzi le dimensioni per tipo, grande per destop, piccolo per device e doppio-piccolo per device retina

[Jing]

parli delle dimensioni di visualizzazione? da dove le modifico?


le dimensioni del file ne ho provare un mucchio ma non cambia nulla

[tomtomeight]

Scusa ma tu che dimensioni del file logo  metti? In quanto alla dimensione della posizione logo puoi modificarla da layout del template mettendo 1, 2 o 3 a seconda di come grande vuoi il logo in base alla larghezza, così se hai una larghezza del template diciamo 1024 e scegli per il logo un layout 2 devi dare alla immagine logo una larghezza di 1024 diviso 6. Infatti un layout per il logo uguale a 2 significa che occuperà 2 dodicesimi della larghezza totale.

[Jing]

Il mio logo è 300x119 pixel e su layout ho impostato col-xs-5 per mobile

[tomtomeight]

Per mobile hai l'opzione di mettere un immagine diversa più piccola.

[Jing]

scusa sono estenuante. si lo so ho l'opzione logo mobile in cui posso caricare un logo apposito ed è quello che ho fatto ma se la metto più piccolo sui cellulari viene sfocata, per quello cercavo un modo di impostare una percentuale massima di ingrandimento dell'immagine o qualcosa di simile

[tomtomeight]

Viene sfocato se lo metti sfocato, ma forse se metti un link si capisce meglio.

[Jing]

il sito è questo ed il problema è con il logo in alto a sinistra


http://www.elisabettarebecchi.it/

[tomtomeight]

Non vedo nessun problema.

[Jing]

Possibile sia il cellulare allora? io lo vedo come in allegato

[tomtomeight]

Non è sgranato, ma se grande metti un immagine già ridimensionata  magari 150 px di larghezza o fai le prove finché ti soddisfa.

[maicolstaip]

Anche io lo vedo bene con lo smartphone