居中动态高度/宽度图像固定为高度/宽度div

Question

I've problem with centering dynamic image to fixed size div. So, the main idea is that image knows how to scale itself whether it is panoramic image or portrait image. The div, I'm aligning to, is close to 16:9 (300x170). Any ideas?

Answer 1

try this - DEMO

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