Question

我目前正在开发一个博客平台，其中包含som特殊功能而不是普通功能。但是当我尝试设置图像大小时，我遇到了问题。

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

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

当用户将图像添加到页面时，这可以正常工作。

BUT！有些图像较小，当拉伸到页面宽度的80％时看起来不太好。

因此，我让他们为他们添加的每个图像，指定，如果他们想要，每个图像的HTML代码（自动完成tinymce）

因此。当他们添加图像时，html如下：

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

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

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

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

感谢您的时间的Mattias。

Answer 1

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

例如：

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

Answer 2

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

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

*全局覆盖所有css;）

Answer 3

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

元素规则没有更具体。仔细检查你的标记。

Answer 4

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

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

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

(height:100px; width:100px;)

肮脏的黑客，我知道，但它似乎对我有用。

Answer 5

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

Answer 6

.blogBody img
{
    height:inherit;
}