Get img tags without width attribute and add inline CSS attribute?

Question

I have a php code that prints some HTML stuff from MYSQL database.

Sometimes there are some img tags in there that don't have any width so I need to find those and add a width attribute via inline CSS to those img tags.

They look like this:

<img class="aligncenter size-medium wp-image-31kj" src="someimage.jpg" alt="">

<img class="alignleft large-medium wp-image-3154" src="someimage.jpg" alt="">

How can I find these img tags and add this to them:

style="width:100%"

Thanks in advance.

EDIT:

Already doing the above using jquery but its not reliable:

$(".img").each(function() {  
   var imgWidth = $(this).width();
   if (imgWidth == 0){
       $(this).css('width','100%');

   }
  });

Do this using javascript querySelectorAll('img').forEach() add your checks inside the foreach & apply the styling you want. — ahmad
– ahmad, Commented Jan 5, 2019 at 21:04
@ahmad, I am already using javascript but it fails sometimes and server side code is far more reliable than client side. — James Juanjie
– James Juanjie, Commented Jan 5, 2019 at 21:07
Pull the img with a parser, check for a width attribute, if not present add one. — user3783243
– user3783243, Commented Jan 5, 2019 at 21:08
Possible duplicate of How do you parse and process HTML/XML in PHP? — user3783243
– user3783243, Commented Jan 5, 2019 at 21:08
@user3783243 would a parser work with stuff that comes from MYSQL database?! — James Juanjie
– James Juanjie, Commented Jan 5, 2019 at 21:38

Maciej Kwas · Accepted Answer · 2019-01-05 21:50:49Z

2

I would do this with simple, self-explanatory css code

img:not([width]) {
   width:100%;
}

Just target img tags that does not have width property

answered Jan 5, 2019 at 21:50

Maciej Kwas

6,5473 gold badges34 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jiwopene Over a year ago

This does not target images that does have only width set using inline CSS.

James Juanjie Over a year ago

This actually works but its not PHP. how reliable is this method?

Maciej Kwas Over a year ago

@JamesJuanjie Are you asking if you can rely on css? Pretty much.

jiwopene · Accepted Answer · 2019-01-05 21:49:53Z

0

Use querySelectorAll to get all img elements with class attribute containing wp-image and set the style.

document.querySelectorAll("[class*=wp-image]").forEach(function(img) {
  img.style.width = "100%";
});

<img src="https://duckduckgo.com/favicon.ico" class="wp-image-foo">
<img src="https://google.com/favicon.ico" class="wp-image-bar">

If you want to select all images without width attribute or CSS property, use this:

var imgs = document.getElementsByTagName("IMG");
for (var i = 0; i < imgs.length; i++) {
  var img = imgs[i];
  if (img.style.width == "" && img.attributes.width === undefined)
    img.style.width = "100%";
}

<img src="https://duckduckgo.com/favicon.ico" class="wp-image-foo">
<img src="https://google.com/favicon.ico" class="wp-image-bar">
<img width=50 src="https://stackoverflow.com/favicon.ico" class="wp-image-bar">

edited Jan 5, 2019 at 21:49

answered Jan 5, 2019 at 21:41

jiwopene

3,76720 silver badges33 bronze badges

1 Comment

jiwopene Over a year ago

@JamesJuanjie please view edit in my answer (the second code snippet)

Collectives™ on Stack Overflow

Get img tags without width attribute and add inline CSS attribute?

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related