调整文本中<img>标签的宽度/高度

Question

I have a chunk of HTML with has images in it. These image tags have a defined width and height:

<img width="300" height="80" src="image.jpg" />

I would like to go through this HTML and replace the width and heights of the images width a % value instead based off 100%=600 and remove the height attribute all together. So, for example, if an image has a defined width of of 300, the width would be replaced with 50%:

<img width="50%" src="image.jpg" />

I'm pretty rubbish with REGEX, but I image its pretty much going to be the answer. So please help.

In case anyone is wondering, this is needed to format blog post HTML into something that will display friendly on a fluid mobile version of the blog. At the moment, creating actual resized copies of the images is not a viable solution.

I have jquery, jquery mobile available as well if there is a javascript approach to this problem.

Answer 1

Try this simple code:

$('img').removeAttr('height').attr('width', function() {
    return Math.round((this.width * 100)/600) + '%'; 
});

Or another variant:

$('img').css('width', function() {
    return Math.round((this.width * 100)/600) + '%'; 
}).removeAttr('width height');