Building the Perfect Logo Strip
打造完美的标志带
We've all been there: you're working on a website and need to display a row of logos—clients, partners, sponsors—you name it. However, logos come in all shapes and sizes, and making them look good together can be quite challenging. How do you get them to play nice and look visually appealing without spending hours tweaking each one?
我们都有过这样的经历:您正在制作一个网站,需要显示一排徽标--客户、合作伙伴、赞助商--等等。然而,徽标的形状和大小各不相同,如何让它们搭配在一起看起来更美观是一个相当大的挑战。如何在不花费大量时间对每个徽标进行调整的情况下,让它们搭配得恰到好处并具有视觉吸引力呢?
This challenge becomes even trickier when you don't know in advance which logos will be in your logo row.
如果事先不知道哪些徽标会出现在徽标行中,这一挑战就会变得更加棘手。
The Common Approach: Same Height for All
通用方法:所有人身高相同
The most straightforward solution is to set all logos to the same height. Let's see how that looks.
最直接的解决方案是将所有徽标设置为相同高度。让我们看看效果如何。
Note: All the logos are wrapped in an additional div (.logo
). This is because we want a plain block element without intrinsic sizing, which images with width and height attributes typically have. By setting the height on the outer div and giving the image a height of 100% and width of auto, we ensure consistent sizing across all logos.
注意:所有徽标都包裹在一个额外的 div(.logo
)中。这是因为我们需要的是一个没有固有大小的纯块元素,而带有宽度和高度属性的图片通常都有固有大小。通过在外层 div 中设置高度,并将图片的高度设为 100%,宽度设为 auto,我们可以确保所有徽标的大小一致。
While this approach is easy to implement, it doesn't always yield a visually balanced logo strip. Wide logos might appear too big.
虽然这种方法很容易实现,但并不总能产生视觉上平衡的徽标条。宽大的徽标可能会显得过大。
Adjust Heights Based on Aspect Ratio
根据长宽比调整高度
To create a more harmonious logo strip, we can adjust the height of each logo based on its aspect ratio. If a logo is significantly wider than it is tall (aspect ratio greater than one), we'll reduce its height accordingly. The wider the logo, the smaller its allowed height. This way, all logos maintain a visual balance.
为了创建更和谐的徽标条,我们可以根据每个徽标的长宽比调整其高度。如果一个徽标的宽度明显大于高度(纵横比大于 1),我们就会相应地降低其高度。徽标越宽,允许的高度就越小。这样,所有徽标都能保持视觉平衡。
To achieve this, we need to know the original width and height of each logo. This shouldn't be a problem when working with a CMS, as you can usually access the image dimensions easily. And if you're creating the images yourself, it's even easier.
为此,我们需要知道每个徽标的原始宽度和高度。在使用内容管理系统时,这应该不成问题,因为您通常可以轻松获取图像尺寸。如果是自己创建图片,那就更简单了。
Setting Up the HTML: 设置 HTML:
On each of the .logo
divs, we'll set two custom properties: --width
and --height
. Be sure to use unitless values here because in CSS calculations, you cannot remove a unit once it's there. 🙂
我们将在每个.logo
div 上设置两个自定义属性:--宽度
和高度
。请务必在此处使用无单位值,因为在 CSS 计算中,单位一旦存在就无法删除。
html<div class="logo-row">
<div class="logo" style="--width:49; --height: 48;">
<img src="first-logo.svg" alt="" />
</div>
<div class="logo" style="--width:228; --height: 48;">
<img src="second-logo.svg" alt="" />
</div>
...more logos...
</div>
The CSS Magic: CSS 魔术
css.logo-row {
--base-height: 3rem;
--scale-factor-horizontal: 0.1;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 3rem 2rem;
}
.logo {
--base-ratio: calc(var(--width) / var(--height));
aspect-ratio: var(--base-ratio);
--factor-horizontal: min(
var(--scale-factor-horizontal) * -1 * var(--base-ratio) + var(--scale-factor-horizontal) + 1,
1
);
height: max(
var(--base-height) / 2,
var(--base-height) * var(--factor-horizontal)
);
& img {
width: 100%;
height: auto;
}
}
There is a lot going on here. Let's break it down step by step.
这里有很多事情要做。让我们一步一步来分析。
1. Setting Base Variables
1.设置基本变量
We set --base-height
and --scale-factor-horizontal
on the .logo-row
. These variables will be used in our calculations for each logo.
我们在.logo-row
上设置了--base-height
和-scale-factor-horizontal
。这些变量将用于我们对每个徽标的计算。
css.logo-row {
--base-height: 3rem;
--scale-factor-horizontal: 0.1;
/* ... */
}
2. Calculating Aspect Ratio
2.计算长宽比
For each .logo
, we calculate its aspect ratio and store it in --base-ratio
.
我们会计算每个.徽标
的宽高比,并将其存储在--base-ratio
中。
css.logo {
--base-ratio: calc(var(--width) / var(--height));
aspect-ratio: var(--base-ratio);
/* ... */
}
3. Calculating the Scaling Factor
3.计算比例因子
Now comes the juicy part! We need to calculate a scaling factor that adjusts the height of each logo based on its aspect ratio. This ensures that wider logos are scaled down proportionally, maintaining visual harmony across the logo strip.
现在到了重点部分!我们需要计算一个缩放因子,根据每个徽标的长宽比调整其高度。这样可以确保较宽的徽标按比例缩小,保持整个徽标条的视觉和谐。
The Formula 公式
We use linear interpolation to compute the scaling factor, which returns 1
when the aspect ratio is 1
. Here's the formula:
我们使用线性插值来计算缩放因子,当长宽比为1
时,缩放因子返回1
。 下面是计算公式:
css--factor-horizontal: min(
(-1 * var(--scale-factor-horizontal) * var(--base-ratio)) +
var(--scale-factor-horizontal) + 1,
1
);
Since we know the value of the --scale-factor-horizontal
variable, we can insert it here to simplify:
由于我们知道--scale-factor-horizontal
变量的值,因此可以将其插入此处以简化操作:
css--factor-horizontal: min(
(-0.1 * var(--base-ratio)) + 1.1,
1
);
Let's Plug in Some Numbers
让我们输入一些数字
- Aspect Ratio of 1: (-0.1 * 1) + 1.1 = 1
高宽比为 1:(-0.1 * 1) + 1.1 = 1 - Aspect Ratio of 2: (-0.1 * 2) + 1.1 = 0.9
高宽比为 2:(-0.1 * 2) + 1.1 = 0.9 - Aspect Ratio of 3: (-0.1 * 3) + 1.1 = 0.8
3 的纵横比:(-0.1 * 3) + 1.1 = 0.8
This means a logo with an aspect ratio of 2:1 will have 90% the height of a logo with a 1:1 aspect ratio.
也就是说,长宽比为 2:1 的徽标高度是长宽比为 1:1 的徽标高度的 90%。
4. Adjusting the Height 4.调整高度
We set the height of each logo by multiplying the base height by the calculated scaling factor. To ensure that even the widest logos don't become too small, we also use a max
function to prevent the height from dropping below half of the base height.
我们通过将基本高度乘以计算出的缩放因子来设置每个徽标的高度。为了确保即使是最宽的徽标也不会变得太小,我们还使用了最大值
函数,以防止高度低于基准高度的一半。
cssheight: max(
var(--base-height) / 2,
var(--base-height) * var(--factor-horizontal)
);
Adding Adjustments for Portrait Logos
为肖像徽标添加调整功能
So far, we've been dealing with logos that are square or wider—that is, logos with an aspect ratio of 1 or greater. But occasionally, you might need to include a portrait-oriented logo that's taller than it is wide, with an aspect ratio less than 1.
到目前为止,我们一直在处理正方形或更宽的徽标,即纵横比为 1 或更大的徽标。但有时,您可能需要使用纵向徽标,这种徽标的高度大于宽度,纵横比小于 1。
The challenge with portrait logos is that their aspect ratios are between 0 and 1 while landscape logos have a ratio that is between 1 and infinity. Therefore the interpolation method we used for wider logos doesn't make a noticeable difference here, and scaling them using the same factor doesn't adjust their size enough.
纵向徽标的难点在于其长宽比介于 0 和 1 之间,而横向徽标的长宽比介于 1 和无穷大之间。因此,我们在处理较宽徽标时使用的插值方法在这里并不能产生明显的效果,而使用相同的系数缩放徽标也无法调整其大小。
To solve this, we'll introduce a new resize factor specifically for portrait logos, called --factor-vertical
.
为了解决这个问题,我们将专门为纵向徽标引入一个新的调整因子,称为--factor-vertical
。
For the final height-calculation, instead of using a max function to prevent logos from becoming too small, we'll switch to a clamp function. This lets us set both minimum and maximum height limits, ensuring that portrait logos don't become too big and overshadow the rest.
在最后的高度计算中,我们不再使用最大值函数来防止徽标过小,而是改用钳位函数。这样,我们就可以同时设置最小和最大高度限制,确保肖像徽标不会变得过大而遮住其他徽标。
Here's the final version of our logo adjustment technique. You can experiment with the two scaling values and adjust the base height of the logos to see how it affects the overall appearance of the logo strip. If you have ideas on how to further refine this solution or insights you'd like to share, I'd love to hear from you! Feel free to reach out and share your suggestions.
这是我们的徽标调整技术的最终版本。您可以尝试使用两个缩放值并调整徽标的基本高度,看看它对徽标条的整体外观有何影响。如果您有进一步完善此解决方案的想法或见解,欢迎与我分享!请随时联系我并分享您的建议。
UPDATE Sept. 25: Scaling Logos to Equal Area
9 月 25 日更新:按比例调整徽标,使其面积相等
I want to give a big shoutout to Roman for suggesting an alternative solution to our logo sizing challenge. His method aims to scale all logos so that they occupy the same area as a square logo would. In other words, the product of the width and height (the area) of each logo becomes consistent across all logos.
我要向Roman致以崇高的敬意,他为我们的徽标尺寸难题提出了另一种解决方案。他的方法旨在缩放所有徽标,使其所占面积与正方形徽标相同。换句话说,每个徽标的宽度和高度的乘积(面积)在所有徽标中保持一致。
How it Works 如何使用
- Calculating the Square's Area: First, we take the base height and multiply it by itself to get the area of a square logo with that height.
计算正方形的面积:首先,我们用底座的高度乘以自己的高度,就可以得到这个高度的正方形徽标的面积。 - Finding the Scale Factor: Next, we determine the scale factor by dividing the square's area by the area of each logo (its width multiplied by its height). Since we're scaling both dimensions uniformly, we take the square root of that ratio.
求比例系数:接下来,我们用正方形的面积除以每个徽标的面积(宽度乘以高度)来确定比例系数。由于我们对两个尺寸进行了统一缩放,因此我们取该比例的平方根。 - Scaling the Logo: We then multiply the height of each logo by this scale factor. This adjusts the logo's size so that it occupies the same area as the square logo.
缩放徽标:然后,我们将每个徽标的高度乘以该比例系数。这样可以调整徽标的大小,使其与正方形徽标所占面积相同。
The beauty of this approach is that it works seamlessly for both portrait and landscape logos, ensuring a consistent visual presence across the logo strip.
这种方法的美妙之处在于,它可以无缝地适用于纵向和横向徽标,确保整个徽标条的视觉效果保持一致。
Adjusting the Visual Impact
调整视觉效果
While Roman's solution is mathematically sound, I found that making all logos occupy exactly the same area can sometimes lead to visual inconsistencies, especially when logos have extreme aspect ratios. To address this, I introduced a strength variable that allows us to control how strongly the scaling is applied.
虽然 Roman 的解决方案在数学上是合理的,但我发现让所有徽标占据完全相同的面积有时会导致视觉上的不一致,尤其是当徽标的长宽比非常大时。为了解决这个问题,我引入了一个强度变量,让我们可以控制缩放的力度。
- Calculating the Scaled Height: First, we compute the scaled height using the scale factor from Roman's method.
计算缩放高度:首先,我们使用罗曼方法中的比例因子计算缩放高度。 - Applying the Strength Factor: Then, we interpolate between the base height and the scaled height using the strength variable. When the strength is set to
1
, we get the full effect of the scaling. When it's set to0
, all logos use the base height without any scaling. Values in between allow for fine-tuning the visual balance to suit your specific needs.
应用强度系数:然后,我们使用强度变量在基本高度和缩放高度之间进行插值。当强度设置为1
时,我们将获得缩放的全部效果。当设置为0
时,所有徽标都使用基本高度,而不进行任何缩放。介于两者之间的值可以微调视觉平衡,以满足您的特定需求。
A Caveat: Dealing with Units in CSS Calculations
注意事项:处理 CSS 计算中的单位问题
One challenge with this method is that to calculate the scale factor accurately, we need unitless values. However, CSS variables often carry units, which can complicate calculations that require pure numbers.
这种方法面临的一个挑战是,要准确计算比例因子,我们需要无单位的数值。然而,CSS 变量通常带有单位,这会使需要纯数字的计算复杂化。
To overcome this, we need to convert the base height into a unitless pixel value. This can be achieved using a clever CSS trick involving trigonometric functions, specifically atan2
and tan
. By using these functions, we can isolate the numerical value from the unit, allowing us to perform the necessary calculations without units interfering.
为了解决这个问题,我们需要将基准高度转换为无单位的像素值。这可以通过一个巧妙的 CSS 技巧来实现,其中涉及三角函数,特别是atan2
和tan
。通过使用这些函数,我们可以将数值与单位隔离开来,从而在不影响单位的情况下进行必要的计算。
If you want to learn more about this, you can have a look at my blog post "Speed vs. Duration – A Use Case for Mixed Unit Division" where I delve into this topic in more detail.
如果您想了解更多相关信息,请参阅我的博文"速度与持续时间--混合单元除法的使用案例",我将在文中详细介绍这一主题。
Logos Used in This Post
本帖使用的徽标
In case you're curious about the logos featured in our examples, here's where they come from:
如果您对我们示例中的徽标感到好奇,这里就是它们的来源:
- 9elements Logo – 9elements.com
9elements徽标 -9elements.com - img.ly Logo – img.ly
img.ly 徽标 -img.ly - CSS Café Meetup Logo – css.cafe
CSS Café Meetup 徽标 -css.cafe - Das Ruhrgebiet Magazin Logo – dasruhrgebiet.de
Das Ruhrgebiet Magazin 徽标 -dasruhrgebiet.de - 9elements Suggestion for CSS 4/5 Logo - new CSS logo discussion
9elements 关于 CSS 4/5 徽标的建议 -CSS 新徽标讨论 - Beloved CSS Owl Selector Logo
心爱的 CSS 猫头鹰选择器徽标 - 10xD Logo – 10xd.de
10xD 徽标 -10xd.de
By the way, if you’re on the hunt for a shiny new logo, all of these were crafted by the talented team at 9elements. Just saying! 😉
顺便说一句,如果你正在寻找一个闪亮的新标志,这些标志都是由9elements 的天才团队精心制作的。说说而已! 😉