- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- immagini ridimensionate in colonne fluide
-
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!
-
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.
-
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.
-
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:
Ovviamente richiede Javascript abilitato quindi se un utente naviga con esso disabilitato non funzionerà . Sta a te scegliere in base alle effettive esigenze.
-
@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.
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
-
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
-
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?
-
Aggiungi semplicemente un "height:48%" a quella classe e dovresti risolvere
-
Purtroppo se aggiungo height:48% dimensiona in % rispetto al contenitore non all'immagine... e quindi si deforma ancora di più!!!!
-
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