调整文本中 <img> 标记的宽度/高度答案

【问题标题】：resize width/height of <img> tag in text调整文本中 <img> 标记的宽度/高度
【发布时间】：2012-02-11 19:01:04
【问题描述】：

我有一大段 HTML，里面有图片。这些图像标签具有定义的宽度和高度：

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

我想通过这个 HTML 并将图像的宽度和高度替换为 % 值，而不是基于 100%=600 并一起删除高度属性。因此，例如，如果图像的定义宽度为 300，则宽度将替换为 50%：

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

我对 REGEX 很垃圾，但我认为它几乎就是答案。所以请帮忙。

如果有人想知道，这需要将博客文章 HTML 格式化为可以在流畅的移动版博客上友好显示的内容。目前，创建实际调整大小的图像副本并不是一个可行的解决方案。

如果有解决此问题的 javascript 方法，我也有 jquery，jquery mobile 也可用。

【问题讨论】：

我认为您不需要正则表达式。另外，如果您设置width=50%，它是相对于图像所在的容器，而不是相对于实际图像大小。您必须使用绝对像素值。

标签： php jquery regex mobile jquery-mobile

【解决方案1】：

经过测试，似乎可以工作：

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

JS Fiddle demo.

【讨论】：

【解决方案2】：

试试这个简单的代码：

$('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');

【讨论】：

【解决方案3】：

如果您不喜欢使用正则表达式，您可以使用 DOMDocument 将您的 HTML 解析为一个对象。见这里：Regex & PHP - isolate src attribute from img tag

【讨论】：