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

Question

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

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

Answer 1

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

的jsfiddle演示

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>