Question

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

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

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

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

我对REGEX非常垃圾，但我想象的几乎就是答案。所以请帮忙。

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

如果有这个问题的javascript方法，我也可以使用jquery，jquery mobile。

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 demo

Answer 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');

Answer 3

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

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

3 个答案: