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生成）

我希望这会有所帮助。