# 类别框图像对齐问题
**URL:** https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890
**Category:** Support
**Tags:** air-theme
**Created:** [2025年三月12日 04:17 UTC](https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890 "2025-03-12T04:17:22Z")
**Posts on this page:** 15
**Page:** 1
### Author:  [@becl](https://meta.discourse.org/u/becl)
#### Post date: [2025年三月12日 04:17 UTC](https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890/1 "2025-03-12T04:17:22Z")
您好，我正在使用 Air 主题，它看起来很棒！
我已经将我的类别设置为方框。当我上传一张 200 x 200 像素的图片时，它看起来不太好。我不确定需要什么样的 CSS 才能让它看起来像右边的方框，但使用我的图片。这样颜色就能像右边的方框一样延伸到边缘。
---
### Author:  [@becl](https://meta.discourse.org/u/becl)
#### Post date: [2025年三月13日 05:36 UTC](https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890/3 "2025-03-13T05:36:20Z")
只是一个更新。上传屏幕上显示的是——建议宽高比为 1:1，最小尺寸为 200 像素。如果留空，则不会显示图像。——我也将其设置为 1000 x 1000，但没有任何变化，所以我认为这可能是主题工作方式的问题。除了图像未显示在框的边缘外，它还在我的图像后面显示了部分之前的蓝色背景。
有什么想法或建议吗？
---
### Author:  [@HAWK](https://meta.discourse.org/u/HAWK)
#### Post date: [2025年三月13日 21:23 UTC](https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890/4 "2025-03-13T21:23:09Z")
您好 – 这是在使用我们的托管试用版吗？恐怕这样的话，您将无法在我们的入门套餐中编辑 CSS。
---
### Author:  [@becl](https://meta.discourse.org/u/becl)
#### Post date: [2025年三月13日 21:31 UTC](https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890/5 "2025-03-13T21:31:10Z")
您好 Hawk，
感谢您的回复。
不，我使用的是全新的自托管安装，并带有 Air 主题。我有点觉得是主题在正确对齐图像方面存在问题。我所做的只是以上传了我推荐比例的图片，然后显示的结果如您在上面所见。
如果图片能像上传图片之前的占位符那样一直显示到边缘，那就太好了。如果不行，至少不要让占位符的蓝色残留物显示在我的图片后面。
我很乐意将 CSS 代码放在某个地方来修复它，但我不知道放在哪里以及需要放什么代码。不过正如我所说，我认为这可能是主题未能正确显示上传文件的问题。
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2025年三月13日 21:49 UTC](https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890/6 "2025-03-13T21:49:21Z")
父 div 上有一个 `margin-top: .5em`，这会将父级和子图像向下移动。
您可以尝试覆盖此行为：
```scss
categories-list .category .category-logo.aspect-image {
margin-top: 0;
}
```
不过，我认为这个问题应该有一个官方的修复方案。
---
### Author:  [@becl](https://meta.discourse.org/u/becl)
#### Post date: [2025年三月15日 21:51 UTC](https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890/8 "2025-03-15T21:51:56Z")
> [@Canapin](#):
>
> ```plaintext
> categories-list .category .category-logo.aspect-image {
> margin-top: 0;
> }
>
> ```
您好 Coin-coin le Canapin，
感谢您的 CSS 代码。我不太确定在哪里添加它。我搜索了在线信息，我认为我需要将其作为组件添加到 air 主题中。我添加了它，启用后没有任何变化。我可能做错了。
我同意，我认为需要查看主题。我可能会在主题页面发帖，看看是否可以修复。
---
### Author:  [@becl](https://meta.discourse.org/u/becl)
#### Post date: [2025年三月15日 22:02 UTC](https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890/9 "2025-03-15T22:02:28Z")
嗨 Hawk，
我能否在此帖子中标记 Air Theme 团队的某个人来尝试解决此问题？
我尝试了此帖子中另一位用户提到的 CSS，但似乎不起作用。
谢谢
Bec
---
### Author:  [@HAWK](https://meta.discourse.org/u/HAWK)
#### Post date: [2025年三月16日 03:59 UTC](https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890/10 "2025-03-16T03:59:46Z")
嗨 Bec，我已经指派了一名设计师来处理，但抱歉无法提供时间范围，现在是周末。
---
### Author:  [@becl](https://meta.discourse.org/u/becl)
#### Post date: [2025年三月16日 04:13 UTC](https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890/11 "2025-03-16T04:13:26Z")
不客气。非常感谢。
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2025年三月18日 01:26 UTC](https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890/12 "2025-03-18T01:26:17Z")
您好！感谢您的反馈。我会进行检查，尽快为您提供答案，或者将修复添加到主题中。
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2025年三月18日 01:38 UTC](https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890/13 "2025-03-18T01:38:30Z")
我这里有一个修复方案 → [DEV: fix image size by jordanvidrine · Pull Request #49 · discourse/discourse-minimal-category-boxes · GitHub](https://github.com/discourse/discourse-minimal-category-boxes/pull/49)
如果您更新安装在 air 主题上的 modern category boxes 主题组件，应该就能解决您的问题。
谢谢！
---
### Author:  [@becl](https://meta.discourse.org/u/becl)
#### Post date: [2025年三月18日 21:10 UTC](https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890/15 "2025-03-18T21:10:30Z")
您好 Jordan，
非常感谢。是的，这解决了背景中仍然显示占位符的问题。
我想知道您是否可以告诉我如何让我的图片像占位符一样延伸到框的边缘？它看起来好多了，我本来以为上传图片后也会是同样的效果。
如果需要使用 CSS，应该放在哪里？因为我之前尝试添加的 CSS 似乎不起作用，我不确定是因为不允许更改主题，还是因为我不太懂，毕竟我是 discourse 的新手。
谢谢
Bec
---
### Author:  [@becl](https://meta.discourse.org/u/becl)
#### Post date: [2025年三月19日 02:08 UTC](https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890/16 "2025-03-19T02:08:20Z")
您好，乔丹：
我想向您汇报一下。
发生了一件奇怪的事情，当我编辑第三个类别框时，所有图像突然自行就位了。所以现在一切看起来都正常。
再次感谢您的所有帮助。
---
### Author:  [@becl](https://meta.discourse.org/u/becl)
#### Post date: [2025年三月19日 02:37 UTC](https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890/17 "2025-03-19T02:37:08Z")
你好，乔丹，
实际上，如果你有连续少于 3 个的类别，那将是一个问题。当连续添加第三张图片时，它会像我上一条消息中那样完美地归位。但如果你只有连续两个，它就不会很好地将图片放置在框内，而是将其作为方形放置。所以现在我有一些图片看起来不错，而有些图片则有一个方形的图片。
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [2025年四月18日 02:37 UTC](https://meta.discourse.org/t/category-boxes-image-alignment-issue/356890/18 "2025-04-18T02:37:45Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.