在固定大小的div内显示未知大小的图像

Question

我有一个<div>固定的大小说height:100px和width:100px.我必须在其中显示未知大小的图像,<div>以便出现以下情况:

1. 图像宽度> div宽度
2. 图像宽度<div宽度
3. 图像宽度= div宽度
4. 图像高度> div高度
5. 图像高度<div高度
6. 图像高度= div高度

无论如何,支持旧版浏览器的最佳跨浏览器策略是什么,以下列标准显示它们:

1. 图像周围没有空白区域
2. 如果溢出,很好地居中(水平和垂直)

Answer 1

要消除空白，请将图像设置为和min-height。要剪辑溢出，请在 div 上设置。要使溢出图像居中，请使用绝对定位和一些 JavaScript 来根据图像的大小设置值。min-width100%overflow: hiddentopleft

编辑：如果图像在两个维度上都大于容器，请使用一些 JavaScript 删除minHeight和minWidth然后将height设为100%。如果宽度上留下空白，则设置height为""并设置width为100%：

.centeredImageContainer {
    height: 100px;
    width: 100px;
    overflow: hidden;
    position: relative;
}
.centeredImage {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
}

function centerImage(img) {
    var container = img.parentNode;
    if (img.offsetHeight > container.clientHeight &&
        img.offsetWidth > container.clientWidth) {
        img.style.minHeight = "0";
        img.style.minWidth = "0";
        img.style.height = "100%";
        if (img.offsetWidth < container.clientWidth) {
            img.style.height = "";
            img.style.width = "100%";
        }
    }
    img.style.top = ((container.offsetHeight - img.offsetHeight) / 2) + "px";
    img.style.left = ((container.offsetWidth - img.offsetWidth) / 2) + "px";
}

jsfiddle.net/QRU4w/2