0

I was under the impression that

<img width="48%" /> (wordpress classic editor will do it this way by default)

is the same as 

<img style="width:48%;" />

However, in real-life tests, I'm finding my WordPress theme completely failing with the aforementioned. HTML Style property works, the direct property embed totally gets ignored. So what's going on exactly?

<img style="width:48%;" /> does not work (default)

<img width="48%" /> works

I just want to really understand what the difference is between the two ways of adding attributes.

Meraj al Maksud
  • 1,528
  • 2
  • 22
  • 36
olcoil
  • 11
  • 1
  • Duplicate of https://stackoverflow.com/questions/3562296/whats-the-difference-between-the-html-width-height-attribute-and-the-css-widt – Asons Oct 08 '19 at 16:56
  • When using `width` attribute, it expect a value w/o a unit, and the value is in `pixel`'s, so no, `` does **not** work – Asons Oct 08 '19 at 16:57
  • 1
    What do you mean with `not work (default)` – t.niese Oct 08 '19 at 16:58
  • @LGSon for html5 this is true, before that you were also allowed to use percentage. And most browsers still support it even in html5 mode for backward compatibility. – t.niese Oct 08 '19 at 17:02
  • @t.niese True....and today (5 years after its release) I expect we talk about HTML5 – Asons Oct 08 '19 at 17:03
  • @LGSon yes but saying it does not work is misleading, as it most certainly works for the OP, because browsers still support it. It is just not valid. (the same way as `/>` is not valid for `img`) – t.niese Oct 08 '19 at 17:11
  • I create an example, https://codepen.io/luarmr/pen/QWWbLzp just to confirm. I think you need to provide more context here. – Raúl Martín Oct 08 '19 at 17:13
  • Possible duplicate of [What's the difference between the HTML width / height attribute and the CSS width / height property on the img element?](https://stackoverflow.com/questions/3562296/whats-the-difference-between-the-html-width-height-attribute-and-the-css-widt) – Meraj al Maksud Oct 08 '19 at 17:16

1 Answers1

0

You cannot use the percentage in img tag width attribute it only takes number which is considered as pixel <img width="48" /> here 48 is in pixels. But when you use inline CSS or style attribute you can specify values with percentage.

narayan maity
  • 322
  • 3
  • 13
  • I think priority is also a difference when there's a collision between these two. Please confirm as I'm not completely sure. – Meraj al Maksud Oct 08 '19 at 17:13
  • 1
    When you put width attribute both side like as width as an img attribute and also in the style CSS file or as a property the HTML file considered first style CSS width property. The collision never happens... – narayan maity Oct 09 '19 at 05:06
  • I think you should update your answer with it. Also, you could introduce `!important` here. – Meraj al Maksud Oct 09 '19 at 05:33
  • 1
    @MerajalMaksud why should `!important` be introduced here? That topic completely unrelated to the question, and `!important` is something you shouldn't use anyway. – t.niese Oct 09 '19 at 07:23