使元素适合父元素答案

【问题标题】：Fit element within parent element使元素适合父元素
【发布时间】：2013-04-23 18:24:29
【问题描述】：

我正在尝试做以下事情：

在保持纵横比的小 div 元素中放置一个巨大的图像。
但是没有使用像 max-width 这样的 CSS 技巧。手动将宽度/高度设置为正确的值。

这是我解释我要做什么的最简单的方法。
我得到以下值：

图片的原始宽度/高度。
目标 div 的宽度/高度。

我尝试了以下示例以使其适合父元素。

if(ratio < 1) {
    setWidth = Math.round((targetH * ratio));
} else {
    setHeight = Math.round((targetW / ratio));
}

查看纵横比并使用它调整大小。
只要纵横比低于 1，就可以正常工作。如果超过它，高度就会开始变得混乱。当你从 0.99 增加到 1 时，似乎也跳跃了很多额外的高度。

【问题讨论】：

这个问题可能对你有帮助：stackoverflow.com/a/3971875/2287470
似乎无法让它发挥作用。高度仍然大于容器的高度。
你能显示完整的代码吗？
为误报感到抱歉。乔让我在他发送的链接中回答。必须更改最后一个 if 来缩放高度而不仅仅是宽度。但是效果很好！

标签： javascript jquery math

【解决方案1】：

Joe 用他发送到另一个 stackoverflow 问题的链接让我走上了正确的道路。以下代码是我最终使用的代码。

“width”是要缩放的元素的当前宽度。
“height”是要缩放的元素的当前高度。
“targetW”是刻度的最大宽度。
“targetH”是标尺的最大高度。

在父元素中完美匹配元素。无论长宽比如何。

if(width > targetW){
    ratio = targetW / width;
    height = height * ratio;
    width = width * ratio;
}

if(height > targetH){
    ratio = targetH / height;
    width = width * ratio;
    height = height * ratio;
}

感谢@Joe

【讨论】：