Question

xxx类的10个元素具有不同的宽度和高度。放置变换：scale（1.1）清楚地扩大了大的，但是小的变化几乎没有显示出差异。这是糟糕的用户体验。数学问题是如何使较大的元素比较小的元素缩小：
宽度10应得到刻度1.1
宽度5应该得到比例1.2

我怎样才能在数学上解决这个问题？

Answer 1

这个问题缺乏背景和细节，因此很难给出一个有意义的答案。但是，给出的示例表明以下解决方案：

x_new = 1 + 1/x_old

其中x_old是输入值，即10或5。使用对数缩放而不仅仅是1/x_old可能是另一种选择，具体取决于上下文。

Answer 2

为了说明我制作这些笔的场景：

非对数比例：http://codepen.io/anon/pen/bwRVpj

logarhitmic scale：http://codepen.io/anon/pen/VKWLJK

var inlineStyle = ''

var divs = document.getElementsByTagName('div')
var len = divs.length
while(len--) {
  var elWidth = divs[len].offsetWidth
  var scale = 1+9/elWidth
  inlineStyle += `#${divs[len].id}:hover {
    transform: scale(${scale})
    }`
}
document.getElementById('lolStyle').innerHTML = inlineStyle

数学上缩放大元素然后小元素

2 个答案: