Image rognée au centre CSS de dimensions variables

Question

J'essaie d'afficher une zone centrale recadrée d'une image et de la faire fonctionner pour des images de taille différente.

J'ai réussi à définir une largeur fixe pour la div contenant l'image et à utiliser la propriété overflow: hidden, cela fonctionne comme je le voudrais sauf que cela ne montre que la partie la plus à gauche de l'image et que le côté droit est masqué.

Ce que j'aimerais, c'est afficher la partie centrale de l'image et masquer les côtés gauche et droit de l'image.

Answer 1

Je choisirais d'en faire une image d'arrière-plan

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

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

Comme pour différentes tailles, vous pouvez utiliser plusieurs classes ou expressions CSS (ou génération css côté serveur)

J'espère que cela vous aidera.