# How to max Width to the edge of post

**URL:** https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883
**Category:** Support
**Created:** [July 28, 2024, 5:59pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883 "2024-07-28T17:59:13Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![wendellverli](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wendellverli/32/280396_2.png) [@wendellverli](https://meta.discourse.org/u/wendellverli)
#### Post date: [July 28, 2024, 5:59pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/1 "2024-07-28T17:59:13Z")

</div>

I’m trying to make sure a “portrait” image is not sized when posted… I want the full width to be accounted for… how do I do that… ?

 ![Screenshot 2024-07-28 at 12.57.52 PM](https://global.discourse-cdn.com/meta/original/4X/2/f/f/2ff3c268ecbf002a9fcdc669c5bf38c0438c9a48.jpeg)

---

<div class="post-metadata">

### Author: ![anon48433008](https://avatars.discourse-cdn.com/v4/letter/a/22d042/32.png) [@anon48433008](https://meta.discourse.org/u/anon48433008)
#### Post date: [July 28, 2024, 6:12pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/2 "2024-07-28T18:12:12Z")

</div>

Provide the page maybe someone will check into it specifically, otherwise play around with whatever browser feature you have for inspecting a page, add object-fit contain/fill etc, or some margins, maybe aspect-ratio etc with whatever element you’re working on and you’ll figure it out I bet 👍

Like this

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/b/b/bbb10e43c86714635548ee16d1f0489e82d89dd9.png)

And of course the marketplace approach if you have a few dollars or bitcoin to offer up can not be overlooked 🤗

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [July 28, 2024, 6:41pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/3 "2024-07-28T18:41:03Z")

</div>

You can search `image` on site settings and play with those. But I think you can’t get what I reckon you are looking for. Sure, with plugins and themes can be done strange and wonderful things, but based what we have I have a feeling that is not that easy, or even possible.

But I’ve been wrong earlier. A couple times 🤪

---

<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: [July 28, 2024, 6:52pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/4 "2024-07-28T18:52:42Z")

</div>

Would the `min ratio to crop` admin setting help with this?

 ![min ratio to crop5](https://global.discourse-cdn.com/meta/original/4X/0/9/d/09d9dc1f33b8c774176012bee5344cd1e8d2bef9.jpeg)

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [July 28, 2024, 6:58pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/5 "2024-07-28T18:58:17Z")

</div>

This #Customization > Theme component may help as well. Just keep in mind it is still in the experimental phase. But also used here on Meta on some #Customization > Theme

> [@Discourse Full-width component](https://meta.discourse.org/t/discourse-full-width-component/292496):
>
> information_sourceSummary Make Discourse occupy the full browser widtheyeglassesPreview [preview](https://discourse.theme-creator.io/theme/chapoi/discourse-full-width)hammer_and_wrenchRepository [Full-width component](https://github.com/discourse/discourse-full-width-component)questionInstall Guide [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component warning This is still an experimental component, which overrides widgets, will most likely break with header refactors, and will not play w…

---

<div class="post-metadata">

### Author: ![wendellverli](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wendellverli/32/280396_2.png) [@wendellverli](https://meta.discourse.org/u/wendellverli)
#### Post date: [July 28, 2024, 7:37pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/6 "2024-07-28T19:37:24Z")

</div>

> [@JammyDodger](#):
>
> min ratio to crop

I tried this - its not that. - still looking for a solution.

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [July 28, 2024, 7:47pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/7 "2024-07-28T19:47:45Z")

</div>

Did you check the other image settings as Jagster suggested? Especially `max image width`

---

<div class="post-metadata">

### Author: ![wendellverli](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wendellverli/32/280396_2.png) [@wendellverli](https://meta.discourse.org/u/wendellverli)
#### Post date: [July 28, 2024, 8:35pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/8 "2024-07-28T20:35:57Z")

</div>

> [@Moin](#):
>
> max image width

I did - changing to 1200 makes no difference… the only way I found to change it is by changing in the actual photo.

I just want the “portrait image” to take the full width of the post.

 ![Screenshot 2024-07-28 at 3.35.42 PM](https://global.discourse-cdn.com/meta/original/4X/a/d/7/ad752ea00fd8648eec53285db4acfd76ba72ea0a.jpeg)

---

<div class="post-metadata">

### Author: ![wendellverli](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wendellverli/32/280396_2.png) [@wendellverli](https://meta.discourse.org/u/wendellverli)
#### Post date: [July 28, 2024, 8:40pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/9 "2024-07-28T20:40:09Z")

</div>

This component is unstable as even with the most updated discourse installed, it shift everything to the left side (no padding) - broke my staging theme.

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [July 28, 2024, 8:43pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/10 "2024-07-28T20:43:15Z")

</div>

Maybe those images exceed `max image height` before `max image width`?

In general, I like that images are limited in size. On smaller screens, like my tablet, otherwise the image would be larger than my screen.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [July 28, 2024, 9:52pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/11 "2024-07-28T21:52:43Z")

</div>

Strange. Tablets should scale no matter a site suggests. iPad anyway works that way, and one… I think it was some Samsung. But every phones can.

Anyway. Handling images is one weak spot of Discourse. An awful mess.

---

<div class="post-metadata">

### Author: ![wendellverli](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wendellverli/32/280396_2.png) [@wendellverli](https://meta.discourse.org/u/wendellverli)
#### Post date: [July 28, 2024, 9:54pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/12 "2024-07-28T21:54:59Z")

</div>

It seems to be a simple thing… the image when posted as portrait should take the full width of the post width container… (if not as default but an easy way to set this up).

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [July 28, 2024, 10:02pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/13 "2024-07-28T22:02:01Z")

</div>

I reckon everyone trust on lightboxing here.

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [July 28, 2024, 10:17pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/14 "2024-07-28T22:17:47Z")

</div>

> [@Jagster](#):
>
> Strange. Tablets should scale no matter a site suggests. iPad anyway works that way, and one… I think it was some Samsung. But every phones can.

If `max image height` is higher than my screen, it won’t fit onto the screen without scrolling. Why should the tablet resize the image inside the post?

  
With the default value it looks like this:  
 ![Screenshot_20240729_001521_Chrome](https://global.discourse-cdn.com/meta/original/4X/4/e/5/4e5f0d1aacdc2c5d3cf0372d1457bbd03e97c93a.jpeg)  
I can see the whole image without scrolling.

Different screen dimensions is something to keep in mind when changing the max image height

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [July 28, 2024, 10:18pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/15 "2024-07-28T22:18:57Z")

</div>

Because mobiles are more user friendly than desktops?

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [July 28, 2024, 10:31pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/16 "2024-07-28T22:31:17Z")

</div>

> [@wendellverli](#):
>
> This component is unstable as even with the most updated discourse installed, it shift everything to the left side (no padding) - broke my staging theme.

Yeah that is a risk with the experimental. As for padding though you could add a custom component to augment it adding overrides & add padding etc.

---

<div class="post-metadata">

### Author: ![wendellverli](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wendellverli/32/280396_2.png) [@wendellverli](https://meta.discourse.org/u/wendellverli)
#### Post date: [July 28, 2024, 10:35pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/17 "2024-07-28T22:35:00Z")

</div>

When you own a Photography forum, images are king and it’s not like they are posting all photos portrait but when they do, they don’t mind the bit where they need to scroll.

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [August 2, 2024, 1:31am UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/18 "2024-08-02T01:31:56Z")

</div>

> [@wendellverli](#):
>
> I just want the “portrait image” to take the full width of the post.

So you would want to stretch an image to the full-width, even when the intrinsic image size is smaller than the page width?

I wouldn’t recommend this, because you probably will lose on quality but:

Have you tried a combination of the setting the `max image height` and `max image width` settings to a high value **and** using css to set:

```plaintext
.cooked img:not(.thumbnail):not(.ytp-thumbnail-image):not(.emoji) {
    width: 100%;
    max-width: 100%;
}

```

That seems to do what you describe on my end.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [August 2, 2024, 7:58am UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/19 "2024-08-02T07:58:03Z")

</div>

Photography forum would not show small images, I reckon. Again, I don’t know, but I think the issue is automatic downscaling. All images are like 800xsomething and then there will be empty space even there could be shown something like 1500xsomething.

But I reckon that is basically only issue with desktops, because mobiles has tendecy guess what an user can or cannot do.

---

<div class="post-metadata">

### Author: ![wendellverli](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wendellverli/32/280396_2.png) [@wendellverli](https://meta.discourse.org/u/wendellverli)
#### Post date: [August 2, 2024, 3:09pm UTC](https://meta.discourse.org/t/how-to-max-width-to-the-edge-of-post/318883/20 "2024-08-02T15:09:33Z")

</div>

Photographers almost never post “small” photos… the process is simple:

**1) Upload photo**

**If photo is smaller than width of post width dimensions:**  
Maintain ratio and stretch width to take the full post width dimensions.

**If photo is equal or larger:**  
Maintain image ratio but take the full post width dimensions.
