调整<；img>；标记 - resize width/height of <img> tag in text

resize width/height of <img> tag in text

本文关键字：标记 gt img 调整 lt | 更新日期: 2023-09-27

我有一块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。

经过测试，似乎有效：

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

JS Fiddle演示。

试试这个简单的代码：

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

如果您不喜欢使用正则表达式，可以使用DOMDocument将HTML解析为对象。请参阅此处：Regex&PHP-从img标签中隔离src属性