css - 可变尺寸的 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 生成）

我希望这有帮助。