Bootstrap Immagini Responsive Scaling

Question

Utilizzando Twitter Bootstrap mi rendo conto che per impostazione predefinita scala le immagini in risposta. Questo è fantastico, ma non è sempre perfetto.

Supponiamo ad esempio di avere un'immagine 500x300 sul desktop, quindi ridimensiona per mobile quell'immagine sarà molto piccola e non molto alta, perdendo gran parte delle parti dettagliate dell'immagine.

Ho visto come altri siti effettivamente non ridimensionano l'immagine molto, ma piuttosto usano il div del genitore per ordinare l'immagine in mask. (http://www.fitnessfireworks.com era un ottimo esempio di questo, non più disponibile.)

Qual è il metodo migliore per realizzare questo? Una combinazione di scalabilità dell'immagine di sfondo e dell'immagine di sfondo CSS? Sto solo cercando le migliori pratiche.

Answer 1

Se la qualità dell'immagine è importante, utilizzerei due immagini utilizzando una dichiarazione di classe diversa. Gli strumenti esterni saranno sempre migliori nel ridimensionamento delle immagini rispetto al browser che lo fa al volo.

Answer 2

È possibile che l'articolo this sia utile. Si spiega circa l'ottimizzazione delle immagini per la visualizzazione reattivo ed evitare download multipli di immagini

Answer 3

Ho visto come altri siti in realtà non scalare l'immagine molto, ma piuttosto usano il div genitore di una sorta di mascherare l'immagine

Se si esamina la CSS sulla pagina si parla, si vedrà che invece di usare le immagini imline, sono in genere definendo div con immagini di sfondo, e utilizzando come CSS

#some-div { 
background-size: 100%; 
background-size: cover; 
background-position: center center; 
vertical-align: top; 
background-image: url(/.../image.jpg); 
} 

Ecco un esempio di come è possibile ottenere risultati completamente diversi con una scalatura delle immagini in linea di vs background-image.

http://www.bootply.com/67094

La chiave del secondo metodo è quello di utilizzare background-size: coperchio e manipolare la dimensione del div (e quindi la dimensione dello sfondo-immagine).

http://css-tricks.com/perfect-full-page-background-image/ ha buone informazioni su variazioni e opzioni con background-cover.