Centro CSS immagine ritagliata di dimensioni variabili

Question

Sto cercando di visualizzare un'area centrale ritagliata di un'immagine e farla funzionare per immagini di dimensioni diverse.

Ho avuto successo impostando una larghezza fissa per il div contenente l'immagine e usando overflow: proprietà nascosta, funziona nel modo in cui mi piacerebbe tranne che mostra solo la parte più a sinistra dell'immagine e il lato destro è nascosto.

Quello che mi piacerebbe è visualizzare la parte centrale dell'immagine e nascondere i lati sinistro e destro dell'immagine

Answer 1

Vado con l'approccio di renderlo un'immagine di sfondo

.imghider {width:100px; background-image:url(./qed.jpg); background-position:center center;background-repeat:no-repeat;}

<div class="imghider">&nbsp;</div>

Per quanto riguarda dimensioni diverse, è possibile utilizzare diverse classi o espressioni CSS (o generazione di CSS lato server)

Spero che questo aiuti.