如何在300px乘300px div中居图像？ （图像尺寸未知）

Question

我有一个div，它位于浏览器左上角的300px到300px之间。我计划在div中显示一个图像但不幸的是我不知道图像的大小，虽然我知道图像将是300px×300px或更小。

如何创建一个设置宽度和高度为300像素的div，它将水平和垂直相同或更小的图像居中？

Answer 1

#container { width: 300px; height: 300px; line-height: 300px; text-align: center; }
#container img { vertical-align: middle; display: inline-block; }

jsFiddle Demo

Answer 2

在div上使用以下CSS：

CSS

div {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff center center no-repeat;
}

HTML / PHP

<div style="background-image: url('<?php echo $image_url; ?>');"></div>