CSS居中裁剪变量尺寸的图像

Question

我想显示图片的中心裁剪区域，并使其适用于不同尺寸的图片。

我成功地为包含图像的div设置了固定宽度，并使用了overflow:hidden属性，这样做的效果符合我的预期，但是只显示了图像的最左侧部分，右侧被隐藏了。

我希望显示图像的中心部分，并将图像的左侧和右侧隐藏。

- jhamburg

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

希望这可以帮到您。

- user83632