在框架内部居中镶嵌一张图片

Question

给定一个任意宽高比的 div，如何最好地放置和样式化一张图片（同样具有任意宽高比），以便满足以下条件：

1. 图片被内切并居中
2. 其尺寸和位置使用相对值设置，因此当框架统一缩放时，图像将自动保持内切和居中（仅在最初插入图像或框架宽高比更改时才需要 JavaScript）
3. 最小化额外标记

这是我们想要的结果：

这里有一个 fiddle 模板，只包含以下内容：

标记

Should pillarbox
<div class="frame">
    <img src="http://www.placekitten.com/200/300" />
</div>

Should letterbox
<div class="frame">
    <img src="http://www.placekitten.com/300/200" />
</div>

CSS

.frame {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    margin: 10px 0px 100px 0;
}

- Brennan Roberts

Answer 1

您可以尝试这样做：更新的 JSFiddle 示例。

.frame {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    margin: 10px 0px 100px 0;
    position: relative; /* added */
}

img {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
} 

- Adrift

---

这非常接近，但当框架大于图像时会失败。请参见http://jsfiddle.net/PBPkh/3/. - Brennan Roberts

Answer 2

通过结合Adrift的CSS。

.frame {
    width: 400px;
    height: 400px;
    border: 2px solid black;
    margin: 10px 0px 100px 0;
    position: relative; /* added */
}

img {
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
} 

使用 JavaScript

var inscribe = function(img, frame) {
    var imgRatio = img.width / img.height;
    var frameRatio = frame.offsetWidth / frame.offsetHeight;

    if (imgRatio > frameRatio) { // image is wider than frame; letterbox
        img.style.width = '100%';
        img.style.height = 'auto';
    } else {                     // image is taller than frame; pillarbox
        img.style.width = 'auto';
        img.style.height = '100%';
    }
}

所有要求都可以被满足。

http://jsfiddle.net/PBPkh/4/

- Brennan Roberts

Answer 3

如果你可以摆脱 <img /> 元素，那么你也可以通过背景图片来实现这一点。

有一个名为 background-size 的 CSS 属性，它被称为 contain，可以完成此任务：

.background{
   background-size: contain;
}

如果您希望将图像居中，只需添加以下内容：

background-position: center center;

- rviolato