Question

我正在尝试使用内联css来覆盖img标记上的内联宽度。

我无法访问外部样式表。
我无法使用内联CSS更改img标记。我正在使用模板，稍后会填充它。

我想要的是在图像标记周围放置一个容器div，使得max-height = 180，max-width = 120。是否有某种CSS魔法和诡计可以做到这一点？

<div style="put something here to override the 320px below">
        <img src="path/to/image" style="width:320px">   <!-- fixed tag -->
</div>

Answer 1

您可以添加内联的小样式块（小提琴here）：

<style type="text/css">
    div img {
        width: 120px !important;
    }
</style>
<div>
    <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"
        style="width:320px"/>
</div>

您可能希望在div和样式规则中添加ID，以防止在页面的其余部分产生不良影响。

<强>更新

如果无法使用style元素，您可以使用CSS transform（小提琴here）尝试以下内容：

<div style="display: inline-block;
            transform: translate(-100px, -30px) scale(0.375, 0.375);">
    <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"
           style="width:320px"/>
</div>

现在，您的里程显然会根据邮件客户端渲染引擎中的CSS3支持级别而有所不同。

Answer 2

你能用JQuery吗？如果是，这是一个解决方案：

$("img[style='width:320px']").css("width","100px");

<强> Check JSFiddle Demo

覆盖内联img CSS，在容器div上使用内联CSS

2 个答案: