0

我正在尝试做以下事情：

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

这是我解释我正在尝试做的最简单的方法。
我得到以下值：

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

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

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

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

4

1 回答 1

0

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

“宽度”是要缩放的元素的当前宽度。
“ 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

于 2013-04-23T18:48:40.187 回答