Javascript 在一个框架内题写并居中放置一个图像

给定任意纵横比的div，在其中放置和设置图像（也具有任意纵横比）样式的最佳方法是什么：

它既刻有字又居中

使用相对值设置其尺寸和位置，以便在均匀缩放帧时，图像将自动保持内接和居中（仅当图像最初插入或帧的纵横比改变时，才需要javascript）

额外的标记被最小化

以下是我们想要的结果：

，这只是：

加价

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>

---

您可以尝试以下方法：

结合

使用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%';
    }
}

可以满足所有要求

---

如果你能去掉

元素，那么你也可以通过背景图像来实现这一点

背景大小上有一个名为包含的css属性，用于执行以下任务：

.background{
   background-size: contain;
}

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

background-position: center center;

---

这非常接近，但当帧大于图像时失败。看见

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

.background{
   background-size: contain;
}

background-position: center center;