# 如何在帖子中增大头像尺寸而不使其模糊
**URL:** https://meta.discourse.org/t/how-to-increase-avatars-size-on-posts-without-making-them-blurred/82214
**Category:** Development
**Created:** [2018年三月5日 14:01 UTC](https://meta.discourse.org/t/how-to-increase-avatars-size-on-posts-without-making-them-blurred/82214 "2018-03-05T14:01:46Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [2018年三月5日 14:01 UTC](https://meta.discourse.org/t/how-to-increase-avatars-size-on-posts-without-making-them-blurred/82214/1 "2018-03-05T14:01:46Z")
> 📢 ⚠ 本指南现已弃用，推荐使用主题组件 [Avatar Size and Shape](https://meta.discourse.org/t/avatar-component/106124) ⚠ 📢
> **原始内容**
>
> ### 1. 增大头像尺寸并重新定位
>
> 要将头像尺寸从默认值 45px 增加到最大 120px，请将上述代码添加到您的 `customize > themes > Desktop > CSS` 标签页中。
> （我的意思是，你真的需要比 120px 更大的头像吗？🤯）
> 在上面的示例中，我将头像尺寸增加到了 `90px` 并重新定位了它。
>
> ```plaintext
> /*增大头像*/
>
> .topic-avatar {
> width: 90px;
> .avatar {
> width: 90px;
> height: 90px;
> }
> }
>
> /*嵌入式回复中的头像将保持默认尺寸，
> 请根据您的需要增大或减小尺寸*/
>
> .embedded-posts .topic-avatar {
> width: 45px;
> img.avatar {
> width: 45px;
> height: 45px;
> }
> }
> ```
>
> 
>
> 但如果您为初级群组使用了徽章，它们现在会显得太小。
>
> 
>
> ### 2. （可选）增大徽章尺寸并重新定位
>
> 让我们稍微增大一下徽章。默认情况下它是 `14px`，我将其翻倍至 `28px`。
> 根据您选择的头像尺寸，您需要相应地增大或减小徽章的尺寸。
>
> ```plaintext
> /*增大徽章尺寸*/
>
> .topic-avatar .avatar-flair {
> font-size: 28px;
> width: 30px;
> height: 30px;
> }
>
> /*在嵌入式帖子中保留默认尺寸，
> 请根据您的需要增大或减小尺寸*/
>
> .embedded-posts.bottom .topic-avatar .avatar-flair {
> font-size: 14px;
> width: 20px;
> height: 20px;
> }
> ```
>
> 
>
> ### 3. 不再出现模糊头像
>
> 将此脚本添加到 `Desktop > Head` 标签页下。请记住将尺寸（‘90’）更改为您选择的尺寸。
>
> ```plaintext
>
> ```
>
> 
---
### Author:  [@BlackKnob](https://meta.discourse.org/u/BlackKnob)
#### Post date: [2018年五月19日 21:23 UTC](https://meta.discourse.org/t/how-to-increase-avatars-size-on-posts-without-making-them-blurred/82214/3 "2018-05-19T21:23:49Z")
> [@dax](#):
>
> \ Discourse.\_registerPluginCode(‘0.8’, function (api) { api.changeWidgetSetting(‘post-avatar’, ‘size’, ‘90’); }); \
has this script been broken in Discourse 2 Beta 10? The 90px avatars look blurred (the one on the left).
---
### Author:  [@Mr.X\_Mr.X](https://meta.discourse.org/u/Mr.X_Mr.X)
#### Post date: [2018年六月30日 16:11 UTC](https://meta.discourse.org/t/how-to-increase-avatars-size-on-posts-without-making-them-blurred/82214/5 "2018-06-30T16:11:21Z")
> [@dax](#):
>
> ### 2. (Optional) Increase size and reposition flairs
>
> Let’s increase the flair a little. By default it is `14px` , I double the size to `28px` .
> Depending on the size of the avatars you have chosen, you will have to increase or decrease the size of the flair accordingly.
>
> ```plaintext
> /*Increase the flair size*/
>
> .topic-avatar .avatar-flair {
> font-size: 28px;
> width: 30px;
> height: 30px;
> }
>
> ```
I have tried this on a Material Design Theme and the “font-size:” field is not changing the flair size no matter the size i’m setting. The width and height does change the position of the flair meaning they are working but the font-size not. Any ideas how to solve this?
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [2018年七月1日 12:54 UTC](https://meta.discourse.org/t/how-to-increase-avatars-size-on-posts-without-making-them-blurred/82214/6 "2018-07-01T12:54:26Z")
> [@Mr.X\_Mr.X](#):
>
> Any ideas how to solve this?
I will take a look ~~Monday~~ Friday
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [2018年七月6日 17:50 UTC](https://meta.discourse.org/t/how-to-increase-avatars-size-on-posts-without-making-them-blurred/82214/7 "2018-07-06T17:50:13Z")
@Mr.X_Mr.X have you tried to clear your browser’s cache?
This is the only reason why at the beginning I did not correctly load the component and the material design theme
---
### Author:  [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [2018年七月15日 09:38 UTC](https://meta.discourse.org/t/how-to-increase-avatars-size-on-posts-without-making-them-blurred/82214/8 "2018-07-15T09:38:37Z")
is there any way to change the avatar size for topics of one category?
I know this can be done via css, but I want the javascript to be also limited for the specific category so that it doesn’t load large images for the unnecessary cases.
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [2018年七月15日 10:01 UTC](https://meta.discourse.org/t/how-to-increase-avatars-size-on-posts-without-making-them-blurred/82214/9 "2018-07-15T10:01:24Z")
CSS doesn’t instruct a browser on what size images to get for the avatars. It instructs a browser on what size to render the images it’s served. What you need to be concerned about is not “loading large” images. But retaining quality when smaller dimension images are displayed larger than they are. (usually enlarging small images larger is a poor idea, but you should be able to get a bit of a tweak by OK)
---
### Author:  [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [2018年七月15日 10:18 UTC](https://meta.discourse.org/t/how-to-increase-avatars-size-on-posts-without-making-them-blurred/82214/10 "2018-07-15T10:18:56Z")
p.s.: I don’t know how to explain what I mean, and thanks in advance for your patience.
to get a 90px image, for the avatar, as explained above, I should use a script:
> [@dax](#):
>
> ### No more blurred avatar.
>
> Add this script under `Desktop > Head` tab.
now I want this script to **work only for a specific category**. is it possible to achieve this via js, such taht other categories get 45 px avatar as usual?
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [2018年七月15日 10:34 UTC](https://meta.discourse.org/t/how-to-increase-avatars-size-on-posts-without-making-them-blurred/82214/11 "2018-07-15T10:34:08Z")
Thanks, it was me, not you. I was thinking you wanted to use CSS to control image size instead of modifying this
```plaintext
```
I’m pretty sure I have seen JavaScript for using categories in conditional checks, but it will take me a while to track it down, if it exists.
---
### Author:  [@MakaryGo](https://meta.discourse.org/u/MakaryGo)
#### Post date: [2018年十二月2日 18:37 UTC](https://meta.discourse.org/t/how-to-increase-avatars-size-on-posts-without-making-them-blurred/82214/12 "2018-12-02T18:37:39Z")
It seems not to work after latest update.
HTML for topic avatars now looks like this:
```html
```
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [2018年十二月3日 15:51 UTC](https://meta.discourse.org/t/how-to-increase-avatars-size-on-posts-without-making-them-blurred/82214/13 "2018-12-03T15:51:10Z")
I just tested the code from @Mittineague locally, and it works. The size of the image is set to 90px wide in the HTML:
And the images display at 90px as well.
---
### Author:  [@MakaryGo](https://meta.discourse.org/u/MakaryGo)
#### Post date: [2018年十二月5日 18:59 UTC](https://meta.discourse.org/t/how-to-increase-avatars-size-on-posts-without-making-them-blurred/82214/14 "2018-12-05T18:59:11Z")
Yeah, after copypasting it it works once again, but no idea why, as only difference was this bit of code 🤨
```html