• User

    immagini ridimensionate in colonne fluide

    Ciao a tutti,
    ho bisogno che le immagini si ridimensionino con la pagina (il layout è fluido).
    Ho usato queste righe nel CSS

    
    img.sidepic {
        border-style: double;
        border-color: #1A3491;
        float: left;
        width: 48%;
        margin-right: 2px;
    }
    
    

    per cui la larghezza delle immagini è sempre il 48% della larghezza della colonna con il contenuto;
    però spesso le immagini non risultano schiacciate (l'altezza non rimane proporzionale).
    come posse rimendiare?
    Grazie in anticipo


  • Super User

    Ciao Astigiando 🙂
    Per far si che vi sia una proporzione automatica dovresti controllare che uno dei due valori non sia presente.
    Nel tuo caso guarda se vi fosse il valore "height" impostato da qualche parte (magari nei valori della singola immagine) e quindi rimuovilo.

    Attento però che il ridimensionamento effettuato dal browser sulle immagini comporta una riduzione della qualità delle stesse, questo perchè ovviamente il software non dispone di una funzionalità di ricomposizione dell'immagine (es. Photoshop, Lightroom etc). Il problema solitamente è fortemente visibile ed infatti lo si nota da una sovrapposizione o imperfetta dislocazione dei pixel oppure sfocatura.

    Ciao!


  • User

    Grazie,
    ho controllato e non ci sono height specificate neanche nell'html.
    E' possibile che vengano deformate le immagini che in partenza non hanno dimensioni standard (es: 3x4, 10x15, ecc.)? Mi sembra che le immagini deformate siano quelle molto più lunghe che larghe e viceversa.


  • User

    Ciao, per un layout fluido non devi far "allargare" le immagini, bensì ti basta farle replicare nello sfondo di qualche elemento.

    Se ad esempio hai una barra orizzontale sopra la quale ci impianti il menù puoi creare una sottile striscia da 1x15 px e la fai ripetere in background ad un ipotetico div all'interno del quale poi piazzi i collegamenti ipertestuali.

    E' la tecnica migliore visto che, come hanno suggerito, il rendering del browser non ha una gran capacità di elaborazione per il ridimensionamento delle immagini.

    :ciauz:


  • User Attivo

    Leggendo il codice ho visto che lui però si riferisce a delle immagini e non a delle immagini di background.

    Se proprio non puoi farne a meno di ridimensionare immagini che non sono di background in questo periodo sta andando molto di voga questo plugin per jQuery:

    aaronvanderzwan.com/maximage/

    Ovviamente richiede Javascript abilitato quindi se un utente naviga con esso disabilitato non funzionerà. Sta a te scegliere in base alle effettive esigenze.


  • User

    @Blancks said:

    Ciao, per un layout fluido non devi far "allargare" le immagini, bensì ti basta farle replicare nello sfondo di qualche elemento.

    Se ad esempio hai una barra orizzontale sopra la quale ci impianti il menù puoi creare una sottile striscia da 1x15 px e la fai ripetere in background ad un ipotetico div all'interno del quale poi piazzi i collegamenti ipertestuali.

    E' la tecnica migliore visto che, come hanno suggerito, il rendering del browser non ha una gran capacità di elaborazione per il ridimensionamento delle immagini.

    :ciauz:

    Non so se ho capito, scusa l'ignoranza ma sono alle prime armi.
    Devo creare una striscia 1x15px nel css o nell'HTML? Come faccio a fare ripetere la striscia?
    Puoi vedere un esempio del sito su www mccollection it.
    Ho un titolo blu e sotto 2 immagini che devono coprire in larghezza il maincontainer...

    Grazie in anticipo


  • Super User

    A quale oggetto ti riferisci per questi sfondi ripetuti?
    Se puoi dirci la referenza che gli hai attribuito (classe, tag o id) possiamo vedere di identificarli nel sito (perchè io non ho capito di quale parli 😄 ).

    Per le immagini il problema è semplice:

    Tu imponi nel css una larghezza (width:48%). Però nel codice html per ogni immagine vi è anche un valore in height che probabilmente è stato immesso dall'editor che hai utilizzato.

    Prendendo in esempio proprio una tua immagine:
    [html]<img height="371" width="587" class="sidepic" src="...." alt="SKODA FABIA S2000 Duval - Giraudet"/>[/html]

    Per fare in modo che la tua larghezza sia accettata (e le immagini si auto-proporzionino) devi eliminare tale valore in height.

    C'è da dire che per una questione di accessibilità, se non erro, i valori di altezza e larghezza per le immagini all'interno del tag sono una buona cosa. Quindi lasciarli così dovrebbe essere una cosa positiva, a te la scelta.

    Facci sapere


  • User

    Ciao,
    le immagini incriminate hanno la classe sidepic (allineata a sinistra) e sidepic1 (allineata a destra):
    il codice è questo
    img.sidepic {
    border-style: double;
    border-color: #1A3491;
    float: left;
    width: 48%;
    margin-right: 2px;
    }

    l'height è inserito probabilmente automaticamente quando pubblico le pagine con sharepoint designer. come faccio a toglierle? oppure a far sì che venga settato in modo proporzionale?


  • Super User

    Aggiungi semplicemente un "height:48%" a quella classe e dovresti risolvere 🙂


  • User

    Purtroppo se aggiungo height:48% dimensiona in % rispetto al contenitore non all'immagine... e quindi si deforma ancora di più!!!!


  • Super User

    Ma infatti la dimensione delle immagini attraverso la percentuale si basa sulla dimensione del suo contenitore e non sulla dimensione della stessa.
    Per questo il mio esempio, attraverso l'inserimento dell'height, funziona 🙂