изменить ширину / высоту тега <img>в тексте

Question

У меня есть кусок HTML с изображениями.Эти теги изображений имеют определенную ширину и высоту:

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

Я хотел бы просмотреть этот HTML-код и заменить ширину и высоту ширины изображений значением% вместо 100% = 600 и удалитьатрибут высоты все вместе.Так, например, если изображение имеет определенную ширину 300, ширина будет заменена на 50%:

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

Я довольно мусор с REGEX, но я представляю его в значительной степени собираюсьбудь ответом.Поэтому, пожалуйста, помогите.

В случае, если кому-то интересно, это необходимо для форматирования HTML-записи блога во что-то, что будет отображаться в дружественной мобильной версии блога.На данный момент создание актуальных копий изображений с измененным размером не является жизнеспособным решением.

У меня есть jquery, jquery mobile, если есть подход на основе javascript к этой проблеме.

Answer 1

Проверено, и, кажется, работает:

$('img').each(
    function(){
        var w = $(this).attr('width').match(/\d+/);
        var percent = (w/600)*100;
        $(this).removeAttr('width').css('width',percent + '%');
    });​

Демонстрация JS Fiddle .

Answer 2

Если вы не любите использовать регулярные выражения, вы можете использовать DOMDocument для анализа вашего HTML в объект.Смотрите здесь: Regex & PHP - изолировать атрибут src от тега img

Answer 3

Попробуйте этот простой код:

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

Или другой вариант:

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