# \<img\> width and height attribute oddities

**URL:** <https://meta.discourse.org/t/img-width-and-height-attribute-oddities/26891>\
**Category:** Bug\
**Created:** [2015年三月27日 23:26 UTC](https://meta.discourse.org/t/img-width-and-height-attribute-oddities/26891 "2015-03-27T23:26:06Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![RaceProUK](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/raceprouk/32/115844_2.png) [@RaceProUK](https://meta.discourse.org/u/RaceProUK)\
**Post date:** [2015年三月27日 23:26 UTC](https://meta.discourse.org/t/img-width-and-height-attribute-oddities/26891/1 "2015-03-27T23:26:06Z")

</div>

It seems the application of `<img>` `width` and `height` attributes is no longer being applied correctly; looks like a regression of [this issue](https://meta.discourse.org/t/setting-only-width-attribute-of-img-tag-works-in-preview-not-in-real-post/757).

To save me posting a gazillion example posts, I’ll link to the WTDWTF thread instead:

> **[What the Daily WTF?](https://what.thedailywtf.com/login)**

Update: It only happens if they’re the same image; if the images are different, the attributes work properly…

---

<div class="post-metadata">

**Author:** ![RaceProUK](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/raceprouk/32/115844_2.png) [@RaceProUK](https://meta.discourse.org/u/RaceProUK)\
**Post date:** [2015年三月27日 23:27 UTC](https://meta.discourse.org/t/img-width-and-height-attribute-oddities/26891/2 "2015-03-27T23:27:30Z")

</div>

One example here to see if it happens here too:

```plaintext
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50">
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="100">
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="150">

```

 ![](https://global.discourse-cdn.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png)  
 ![](https://global.discourse-cdn.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png)  
 ![](https://global.discourse-cdn.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png)

I don’t have many images available to hand

Edit: Yep, here too.

---

<div class="post-metadata">

**Author:** ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)\
**Post date:** [2015年三月27日 23:45 UTC](https://meta.discourse.org/t/img-width-and-height-attribute-oddities/26891/3 "2015-03-27T23:45:21Z")

</div>

The view-source mark-up shows they aren’t 3 images, but the same image 3 times.

```plaintext
<p>
  <img src="//cdn.discourse.org/meta//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" height="137" width="150">
  <br>
  <img src="//cdn.discourse.org/meta//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" height="137" width="150">
  <br>
  <img src="//cdn.discourse.org/meta//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" height="137" width="150">
</p>

```

---

<div class="post-metadata">

**Author:** ![RaceProUK](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/raceprouk/32/115844_2.png) [@RaceProUK](https://meta.discourse.org/u/RaceProUK)\
**Post date:** [2015年三月28日 00:54 UTC](https://meta.discourse.org/t/img-width-and-height-attribute-oddities/26891/4 "2015-03-28T00:54:55Z")

</div>

Only the third matches the raw though

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2015年三月28日 02:07 UTC](https://meta.discourse.org/t/img-width-and-height-attribute-oddities/26891/5 "2015-03-28T02:07:15Z")

</div>

Arbitrary widths are not supported. The idea is that the image contains the _correct_ width, either max thumbnail size, or the exact size if the image is smaller than the max thumbnail size.

---

<div class="post-metadata">

**Author:** ![anon25879736](https://avatars.discourse-cdn.com/v4/letter/a/e95f7d/32.png) [@anon25879736](https://meta.discourse.org/u/anon25879736)\
**Post date:** [2015年四月1日 15:06 UTC](https://meta.discourse.org/t/img-width-and-height-attribute-oddities/26891/6 "2015-04-01T15:06:55Z")

</div>

> [@codinghorror](#):
>
> Arbitrary widths are not supported. The idea is that the image contains the correct width, either max thumbnail size, or the exact size if the image is smaller than the max thumbnail size.

It’s not really an arbitrary width though. It’s a quick way to scale the image. If only one dimension is provided, proper browser handling scales the image, as opposed to squishing/stretching the specified dimension.

To further elaborate on @RaceProUK’s issue, let’s take the same image and widths, but reverse the order that @RaceProUK used:

```plaintext
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="150">
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="100">
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50">

```

 ![](https://global.discourse-cdn.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png)  
 ![](https://global.discourse-cdn.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png)  
 ![](https://global.discourse-cdn.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png)

Now, if that were really doing what you claimed, those should all be about 150px wide (actually 171px since that is the width of the source image), but they are all showing up as 50px wide. So you are claiming that “arbitrary widths” aren’t supported, when they are. It’s just the last width for a given image in a post is the only one used. Widths on all other instances of that image are overwritten.

---

<div class="post-metadata">

**Author:** ![anon25879736](https://avatars.discourse-cdn.com/v4/letter/a/e95f7d/32.png) [@anon25879736](https://meta.discourse.org/u/anon25879736)\
**Post date:** [2015年四月1日 15:16 UTC](https://meta.discourse.org/t/img-width-and-height-attribute-oddities/26891/7 "2015-04-01T15:16:41Z")

</div>

As pointed out by @Mittineague, the images are going from a raw of:

```plaintext
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="150">
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="100">
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50">

```

To a cooked HTML of:

```plaintext
<p>
  <img src="//meta-discourse.globl.ssl.fastly.net//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50" height="46">
  <br>
  <img src="//meta-discourse.globl.ssl.fastly.net//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50" height="46">
  <br>
  <img src="//meta-discourse.globl.ssl.fastly.net//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50" height="46">
</p>

```

Obviously, something is happening when the post is being cooked.

---

<div class="post-metadata">

**Author:** ![RaceProUK](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/raceprouk/32/115844_2.png) [@RaceProUK](https://meta.discourse.org/u/RaceProUK)\
**Post date:** [2015年四月1日 15:29 UTC](https://meta.discourse.org/t/img-width-and-height-attribute-oddities/26891/8 "2015-04-01T15:29:38Z")

</div>

If I had to guess, it’s because the cooking code server-side is ‘deduping’ the size attributes based on the filename; the client-side cooker doesn’t do that, as they look fine in preview.

 ![](https://global.discourse-cdn.com/meta/original/3X/d/9/d9901172b5a5d090e2813e5d75907625f1688234.PNG)

---

<div class="post-metadata">

**Author:** ![anon25879736](https://avatars.discourse-cdn.com/v4/letter/a/e95f7d/32.png) [@anon25879736](https://meta.discourse.org/u/anon25879736)\
**Post date:** [2015年五月19日 21:27 UTC](https://meta.discourse.org/t/img-width-and-height-attribute-oddities/26891/9 "2015-05-19T21:27:39Z")

</div>

Has any progress been made on this? It still seems to be an issue.

```plaintext
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="150">
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="100">
<img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png" width="50">

```

 ![](https://global.discourse-cdn.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png)  
 ![](https://global.discourse-cdn.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png)  
 ![](https://global.discourse-cdn.com/meta/original/3X/2/3/2302e458436b35f8493259805de0e2e91fd5038e.png)

---

<div class="post-metadata">

**Author:** ![gwwar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gwwar/32/116586_2.png) [@gwwar](https://meta.discourse.org/u/gwwar)\
**Post date:** [2015年八月30日 00:12 UTC](https://meta.discourse.org/t/img-width-and-height-attribute-oddities/26891/10 "2015-08-30T00:12:08Z")

</div>

This should be fixed by:  
[https://github.com/discourse/discourse/pull/3706](https://github.com/discourse/discourse/pull/3706)

---

<div class="post-metadata">

**Author:** ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)\
**Post date:** [2015年八月30日 09:34 UTC](https://meta.discourse.org/t/img-width-and-height-attribute-oddities/26891/11 "2015-08-30T09:34:27Z")

</div>