删除所有CSS图像样式但保留html属性(宽度和高度)

时间:2017-04-29 17:58:59

标签: html css laravel-5

我将html文本存储在数据库中,例如:

<p><img title="dasdasd" src="storage/posts/April2017/lKZCxXpP.jpg" alt="asdasd" width="100" height="100"/></p>

然后在另一个页面中我将此文本显示为html,将其视为需要以格式显示的帖子正文。

问题是我使用的模板包含很多样式。 在style.css我有

img {  max-width: 100%;   height: auto;   width: 100%; }

它来自模板样式,我无法改变它,因为它会弄乱我的所有模板。

问题

模板样式覆盖了与数据库中的html一起存储的图像width ="100" height="100"的样式,因此我需要图像使用由帖子的创建者提供的宽度和高度并存储在数据库中。

我已经尝试了

height: unset;  width: unset;

但它会将图像恢复为原始尺寸,而不是创作者提供的尺寸。

除了改变所有img风格的模板之外,我能做些什么吗?

3 个答案:

答案 0 :(得分:1)

css总是优先考虑内联样式,因此将字符串存储在db中,如此

<p><img title="dasdasd" src="storage/posts/April2017/lKZCxXpP.jpg" alt="asdasd" style="width:100; height:100;" /></p>

通过简单的方式来检索图像,良好的意识形态你甚至可以通过存储图像的位置和使用js放置img标签来简化

我希望这可以帮到你

答案 1 :(得分:1)

抱歉重新发布我的答案,以便更好地格式化lol

所以如果你有一个以上就是这样:

<?php
$foo = '<p>
<img title="img 1" src="https://cdn-enterprise.discourse.org/sitepoint/community/user_avatar/www.sitepoint.com/paulob/45/44116_1.png" alt="asdasd" width="100" height="100"/>
<img title="img 2" src="https://cdn-enterprise.discourse.org/sitepoint/community/user_avatar/www.sitepoint.com/paulob/45/44116_1.png" alt="asdasd" width="200" height="200"/>
</p>';

$pattern = '/width="(\d+)"\s+height="(\d+)"/';
$replacement = 'style="width:$1;height:$2;"';
echo preg_replace($pattern, $replacement, $foo);
?>

答案 2 :(得分:0)

您可以提取HTML字符串的宽度和高度,并在图像上直接添加一个等于该字符的样式属性。添加!对它很重要,以便它成为默认值。

<?php

    $foo = '<p><img title="dasdasd" src="storage/posts/April2017/lKZCxXpP.jpg" alt="asdasd" width="100" height="100"/></p>';
    $parsedFoo = json_decode(json_encode(simplexml_load_string($foo)), true);
    $newFoo = str_replace('src=', 'style="height:'.$parsedFoo['@attributes']['height'].'!important;width:'.$parsedFoo['@attributes']['width'].'!important;" src=', $foo);

?>