使用容器div中的内联CSS覆盖内联img CSS

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>

- Vyteo

---

请尝试在内联样式中使用!important，并确认其是否有效？ - Bhojendra Rauniyar

Answer 1

您可以在行内添加一个小的样式块（这里有一个演示链接）：

<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，具体方法请参考此处的示例代码（fiddle 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支持的水平不同，因此效果会有所差异。

- Robby Cornelissen

---

这可能是最好/最简单的答案。我读到它时有一种“傻呵呵”的感觉。为了我的测试用例尝试一下... :D - Vyteo

但请记住，这里扮演的主要角色是!important。 - Kheema Pandey

这种内联样式重要性不起作用，所以它也行不通。请仔细阅读我的答案，我建议使用ID并为其应用样式，这样它就不会被某些脚本覆盖，因为该脚本没有使用任何类或ID... - Bhojendra Rauniyar

刚刚看到了你的评论，所以我删除了我的评论。 - Kheema Pandey

我不确定为什么这被评为-1。Fiddle演示可以正常工作。不幸的是，我不能使用样式或脚本标签。编辑器会将它们剥离掉。 - Vyteo

Answer 2

"你能使用jQuery吗？如果可以，这是一个解决方案："

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

检查JSFiddle演示

- Moshtaf

---

我考虑尝试这个。这是用于电子邮件模板的，所以我不知道使用jQuery的效果，甚至不知道能否使用。 - Vyteo

@SteveUser：不，如果是用于电子邮件模板，我认为无法使用JQuery。 - Moshtaf

好的，我就是这么想的。此外，模板编辑器会删除脚本标签。不过还是谢谢你的帮助！ - Vyteo