将具有随机分辨率的图像居中到固定大小的父div的中心

Question

我有一个200高，320宽的区域，我想用图像填充它，图像的原始分辨率可以是任何。我为图像的父级设置了最大高度200px。因为现在用户可以看到图像的第一个200px高度，但我希望图像中心有200px。我不应该使用任何jQuery插件，所以我编写了以下JavaScript：

var offsetHeight = (elem[0].height - 200) / 2;
        if (elem[0].height > 200 && offsetHeight > 0) {
          $(elem).css("margin-top", -offsetHeight);
        }

它采用图像的高度并将其缩小200px将其除以2，然后尝试通过此偏移将图像的位置移动到顶部，但这不起作用。

任何想法我怎么能用JavaScript或CSS做到这一点？

Answer 1

您可以将图像设置为元素的背景，然后设置如下：

#imagedemo {
    background:url(https://www.google.co.in/images/srpr/logo11w.png) center center; 
    width:200px; 
    height:200px; 
    border:1px solid red;
}

选中fiddle。