我面临的一个常规挑战是平衡两个（或更多）徽标。他们是需要平等还是需要优先考虑。然而，一些标志可能是正方形，其他的可能是矩形、圆形等......
作为一个快速示例，我从Unsplash中抢到了一张漂亮的高分辨率照片，并假装它是一则需要在其上显示一些鞋类品牌徽标的广告。在这种情况下，我使用了 Adidas 和 Saucony。
即使它们的高度相同，这肯定是不平衡的：
同样，即使它们的宽度相同，这也不平衡：
那么问题就变成了它们何时处于平衡状态，是这种平衡吗：
也许再调整一点，就是这个平衡：
在这些示例中，我只使用了两个黑色徽标。考虑到颜色，它会变得更加难以平衡。另一个问题是当徽标中有小文本时。
所以问题是，除了估计/观察它之外，还有哪些技巧、方法甚至工具可以平衡不同大小的徽标？
通过在设计中创建、放置和平衡空元素来定义您有多少可用空间。
我选择使用黄金分割率（100px x 161px），因为使用水平矩形比使用基于大多数徽标宽大于高的完美正方形更好，并且黄金分割率同样好当我没有充分的理由时，一个数字。使用一堆特别宽的徽标（例如印刷徽标）时，我可能会使用更宽的画布。
设置与您之前定义的“可用空间”大小相同的画布。
我通常选择在左右添加一些空间/出血/填充，并创建指南以使徽标远离绝对边缘，但这不是必需的。
找到最宽的徽标并将其放在画布上，然后将其缩放以适合水平参考线的边缘（如果不存在参考线，则为画布）。
找到您最高的徽标并将其放入同一画布中。缩放它，直到其中的主要文本与另一个放置的徽标中的主要文本的大小大致相同。
将它放在单独的画布上，将其垂直和水平居中，然后在其上方和下方放置水平参考线。
现在，这种方法并不能保证适用于每个徽标，任何单个工作流程都存在太多变化，无法涵盖所有内容。但是，根据您专门使用的徽标的平均形状调整原始画布（可用空间）可以产生更好的结果。
请记住，您能做的最好的事情是：
制定标准，即使它们是任意的，也有助于建立更强的一致性。这些一致的无形界限在不知不觉中被注意到，但仍然被注意到。
我使用这些指南制作了耐克和阿迪达斯的标志，并与其他标志并排放置。还可以查看实时 jsFiddle：
我不得不承认，在我调整了所有四个尺寸之后，我选择手动将 Saucony 标志调整得更小一点，因为它比其他标志稍大。此方法对于创建整体基线很有用，然后一旦所有徽标的大小大致相同，您就可以选择需要手动调整的少数几个并在最后用肉眼完成它们。
我认为在那个特定的示例中，您应该将两个徽标都缩放到一个参考，即文本……因为当对齐具有文本的两个徽标时，您应该首先考虑文本比例。在您的示例中，徽标的两种字体看起来相似。
您将实现您所寻求的平衡，因为阿迪达斯标志更偏向顶部，而另一个标志则向下。如下图所示
对于那些希望使用 CMS 或 Javascript 自动执行此操作的人，我想出了一个简短的公式，它可以接受大多数徽标大小并使它们在视觉上保持一致。
这是在Javascript中：
(function() {
"use strict";
window.onload = function() {
var images = document.querySelectorAll(".media-images.media-images--config-dynamic .media-images__image");
function adjustImageWidth(image) {
var widthBase = 50;
var scaleFactor = 0.525;
var imageRatio = image.naturalWidth / image.naturalHeight;
image.width = Math.pow(imageRatio, scaleFactor) * widthBase;
}
images.forEach(adjustImageWidth);
};
}());
然后你可以对它们进行网格化，并使用 CSS 对它们做任何你喜欢的事情。
这是一个可以玩的 Codepen：https ://codepen.io/danpaquette/pen/jXpbQK
并更详细地说明它正在做什么：https ://danpaquette.net/read/automatically-resizing-a-list-of-icons-or-logos-so-theyre-visually-proportional/
我在一家非营利组织工作，当在传单和邀请函中加入赞助组织时，我必须经常这样做。我通常做的是首先调整徽标的大小，使字体大小相等，然后根据徽标的整体大小按比例单独调整。