在div中裁剪和居中任意大小的图像

Question

我有一个div我希望在其中放置任何任意大小的图像，最好使用img标记而不是CSS background-image样式。我看了很多其他类似的问题，没有人回答我的问题。

我想要显示图像的方式是：

1. 如果图像是纵向（高度大于宽度），图像在div内的宽度为100％，并且垂直居中。额外的高度将在div之外，但不可见（如图所示，图像将显示为“裁剪”。）

2. 如果是横向，则＃1中的属性将适用，但水平而非垂直。




我不想要拉伸图像。我做想要填充div中的整个空间。


这方面的一个例子是imgur.com上出现的图像框。

Answer 1

尝试使用javascript对中。只需设置position: absolute，left:50%，top:50%和margin-left:-width/2，margin-top:-height/2