javascript - 如何强制图像背景适合较小的 div 中心

Question

<div id="img-frame">
<img src="mypathimg.png"/>
</div>

使用 img 100% 会起作用，但它与 Facebook 不同，它缩小但显示图像的中心。

Answer 1

由于其他答案都不完整，因此将标记更改为:

<div id="img-frame">
    <div style="background-image:url(yoururl.png)" class="img"></div>
</div>

现在添加 CSS:

.img-frame > .img {
  background-size:cover;       /* Scale to fit optimistically */
  background-position:center;  /* Scale from center */
  width:100%;                  /* Same width as parent */
  height:100%;                 /* Same height as parent */
}