是否可以使用图像（html）高度和宽度标签覆盖图像的 CSS 高度和宽度？答案

【问题标题】：is it possible to override css height and width of image, with image (html) height & width tag?是否可以使用图像（html）高度和宽度标签覆盖图像的 CSS 高度和宽度？
【发布时间】：2016-12-20 09:26:47
【问题描述】：

我目前正在开发一个博客平台，它比普通的有一些特殊功能。但是当我尝试设置图像大小时遇到了问题。

我有一个包含以下 css 的文件：

.blogBody img
{
        display: block;
    margin-left: auto;
    margin-right: auto;
    width:80%;
    height:auto;
    }

当用户将他们的图像添加到页面时，这应该会起作用。

但是！一些图片较小，拉伸到页面宽度的 80% 时看起来不太好看。

因此，我让他们为他们添加的每张图片指定，如果他们愿意，为每张图片指定 HTML 代码（使用 tinymce 自动完成）

所以。当他们添加图片时，html 如下：

<img src="....." />

但是当他们想要手动设置大小时，img 标签变成了（tinymce）：

<img src="......" width="..." height="...." />

但是。图像仍然是页面宽度的 80%！是否可以让img宽度覆盖css图片宽度？

感谢您的宝贵时间马蒂亚斯。

【问题讨论】：

如果 HTML 真的是 <img src="......" style="width:50px;height:45px;" />，那么您问题中的 .blogBody img CSS 不会影响它，因为来自 style 属性的 CSS 具有更高的特异性。一定有其他原因造成这种情况。
对不起，我对 img 标签中的样式有误。它实际上是应用于 img 标签的 html 宽度和高度。

标签： html css

【解决方案1】：

尝试将!important 添加到内联CSS。这应该会强制新尺寸覆盖定义的 CSS。

例如：

<img src="......" style="width:50px !important;height:45px !important;" />

【讨论】：

【解决方案2】：

要覆盖所有 css，包括内联样式和 css 元素样式，请执行以下操作：

* {
    max-width:100% !important;
    height:auto !important;
}

* 全局覆盖所有 css ;)

【讨论】：

谢谢，这成功了！即：“宽度：自动！重要”。问题是我想设置一个最大高度，它 DID 覆盖（在 chrome 中），但是 img 元素上的 width 属性导致事情拉伸。这个 DID 覆盖了元素，谢谢！关键是：不仅是 !important，还有 auto。

【解决方案3】：

我相信我和 OP 有同样的问题。我正在使用编辑器 TinyMCE 3.5.8，当用户使用编辑器插入具有特定尺寸的照片时，使用“advimage”插件，使用 HTML 属性 (height="100" width="100") 调整照片大小，而不是 CSS 样式 (height:100px; width:100px;) .

这是 TinyMCE bug report here 的一个已知问题。

我发现使调整图像大小的唯一方法是通过进入 image.js 将“px”后缀添加到 HTML 属性的末尾（在我的设置中，它在 @987654324 中找到@并编辑：

tinymce.extend(args, {
        src : nl.src.value.replace(/ /g, '%20'),
        width : nl.width.value + "px", 
        height : nl.height.value + "px",

我知道这很糟糕，但它似乎对我有用。

【讨论】：

【解决方案4】：

你是对的，元素样式会覆盖任何其他指定的样式。 CSS 在所谓的特异性规则上运行，其中最具体的规则会覆盖任何不太具体的规则的属性。

元素规则不会变得更具体。仔细检查您的标记。

http://jsfiddle.net/n2VCk/

【讨论】：

特异性和优先级是两个不同的东西。
对不起，我对 img 标签中的样式有误。它实际上是应用于 img 标签的 html 宽度和高度。
好的，这不会覆盖 CSS 样式。将其更改为使用style=""，您应该会很好。

【解决方案5】：

尝试使用 max-width: 80% 而不是 width: 80% 和 height: auto 那样图像只有在大于可用空间时才会调整大小，并且高度始终成比例。

【讨论】：

【解决方案6】：

.blogBody img
{
    height:inherit;
}

【讨论】：

添加一些解释，说明此答案如何帮助 OP 解决当前问题