在父元素中匹配元素

Fit element within parent element

本文关键字：元素      更新时间：2023-09-26

我想做以下事情:

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

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

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

我尝试了下面的例子，使它适合父元素。

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

查看长宽比并使用它来调整大小。
只要宽高比低于1，就可以正常工作。如果它超过它，高度就会变得混乱。当你从0.99到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

相关文章：