CSS-центр обрезанного изображения переменных размеров

Question

Я пытаюсь отобразить обрезанную центральную область изображения и заставить ее работать для изображений разного размера.

Я успешно установил фиксированную ширину для div, содержащего изображение, и использовал свойство overflow: hidden, это работает так, как мне хотелось бы, за исключением того, что показывает только левую часть изображения, а правая сторона скрыта.

Мне бы хотелось, чтобы отображалась центральная часть изображения и чтобы были скрыты левая и правая стороны изображения.

Answer 1

Я бы пошел с подходом сделать его фоновым изображением

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

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

Что касается разных размеров, вы можете использовать несколько классов или CSS-выражений (или генерацию CSS на стороне сервера)

Надеюсь, это поможет.