Question

我正在努力做到以下几点：

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

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

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

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

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

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

Answer 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

父元素中的适合元素

1 个答案: