Javascript 将动态高度/宽度图像居中到固定高度/宽度div

我对将动态图像居中到固定大小的div有问题。所以，主要的想法是图像知道如何缩放自己，无论是全景图像还是肖像图像。我要调整的div接近16:9（300x170）。有什么想法吗？

试试这个-

---

你能提供一些代码和你到目前为止尝试过的东西吗？我尝试过将外部元素显示为table，将内部元素显示为table cell，然后将其与table css对齐，但运气不好。我想如果我想要我在OP中描述的方式，它也不会起作用。可能有一个小障碍是图像是CSS3 flip div的一面。这就成功了。该键位于“最大宽度”、“最大高度”属性中。谢谢：）

div {
    height: 170px;
    width: 300px;
    border: solid;
    line-height: 170px;
    text-align: center;
}

div img {
    display: inline-block;
    max-width: 300px;
    max-height: 170px;
    vertical-align: middle;
}