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

Question

我将动态图像居中到固定大小的 div 有问题。因此，主要思想是图像知道如何缩放自己，无论是全景图像还是肖像图像。我要对齐的 div 接近 16:9 (300x170)。有任何想法吗？

Answer 1

试试这个 -演示

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;
}