# 页面头图导致移动设备上用户头像变大

**URL:** https://meta.discourse.org/t/after-header-image-causing-huge-user-avatars-on-mobile-devices/70022
**Category:** Support
**Created:** [2017年九月14日 07:32 UTC](https://meta.discourse.org/t/after-header-image-causing-huge-user-avatars-on-mobile-devices/70022 "2017-09-14T07:32:35Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![ron\_jeremy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ron_jeremy/32/56621_2.png) [@ron\_jeremy](https://meta.discourse.org/u/ron_jeremy)
#### Post date: [2017年九月14日 07:32 UTC](https://meta.discourse.org/t/after-header-image-causing-huge-user-avatars-on-mobile-devices/70022/1 "2017-09-14T07:32:36Z")

</div>

I just added a header image to my forum and thought all was good but not so…

Here’s what the site looks like **without** the image:

 ![screenshot_no_header](https://global.discourse-cdn.com/meta/original/3X/0/e/0e712826e863e19e79f784b0c07194b036b1e0f1.png)

Here’s what the site looks like **with** the image:

 ![screenshot_with_header](https://global.discourse-cdn.com/meta/original/3X/f/7/f77b0c3714b36193142778ea24ad712a38bf2c3d.png)

As you can see, the avatars are huge. This is likely due to my undoubtedly crappy html. Here’s the code I used in the “After Header” section (desktop and mobile devices):

```
<style>
img {
width: 100%;
height: auto;
}
</style>
<img src="https://www.dropbox.com/s/wtwkcf2jidfd92r/single-track-bc-
header.jpg?raw=1" style=padding-bottom:18px; alt="Single Track BC header 
image">

```

I have put a band-aid on it for now by hiding the users

```
(.topic-list .posters {display: none;}

```

but for some reason it only works with the Desktop css, not the Mobile css.

Any pointers as to where I went wrong?

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2017年九月14日 08:22 UTC](https://meta.discourse.org/t/after-header-image-causing-huge-user-avatars-on-mobile-devices/70022/2 "2017-09-14T08:22:27Z")

</div>

> [@ron\_jeremy](#):
>
> where I went wrong?

The style `img {width: 100%;}` is being applied to images that you don’t want it applied to. Give the header image a class and then just apply the width 100% to that.

```plaintext
<style>
.stbc-header-image {
width: 100%;
height: auto;
}
</style>
<img class="stbc-header-image" src="https://www.dropbox.com/s/wtwkcf2jidfd92r/single-track-bc-
header.jpg?raw=1" style=padding-bottom:18px; alt="Single Track BC header 
image">

```

---

<div class="post-metadata">

### Author: ![ron\_jeremy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ron_jeremy/32/56621_2.png) [@ron\_jeremy](https://meta.discourse.org/u/ron_jeremy)
#### Post date: [2017年九月14日 21:48 UTC](https://meta.discourse.org/t/after-header-image-causing-huge-user-avatars-on-mobile-devices/70022/3 "2017-09-14T21:48:36Z")

</div>

You, sir, are a gentleman and a scholar. I thank you very much.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [2024年六月8日 12:37 UTC](https://meta.discourse.org/t/after-header-image-causing-huge-user-avatars-on-mobile-devices/70022/5 "2024-06-08T12:37:35Z")

</div>

此主题已在 2459 天后自动关闭。不再允许回复。