是否可以使用图像（html）高度和宽度标签覆盖图像的 css 高度和宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9312285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
is it possible to override css height and width of image, with image (html) height & width tag?
提问by Easyrider
I am currently developing a blog platform with som special features than the ordinary ones. But i run into problem when i try to set the image size.
我目前正在开发一个博客平台，比普通的有一些特殊的功能。但是当我尝试设置图像大小时遇到了问题。
I have a file with the following css:
我有一个包含以下 css 的文件：
.blogBody img
{
display: block;
margin-left: auto;
margin-right: auto;
width:80%;
height:auto;
}
This works as it should when users add their images to the page.
当用户将他们的图像添加到页面时，这会正常工作。
BUT! some images are smaller and doesnt look nice when it is stretched to the size of 80 percent of the page width.
但！某些图像在拉伸至页面宽度的 80% 时较小且不美观。
So therefore i let them for each image they add, specify, if they want, HTML code for each image (automatically done with tinymce)
因此，我让他们为他们添加的每个图像指定，如果他们愿意，为每个图像指定 HTML 代码（使用 tinymce 自动完成）
So. When they add an image the html is the following:
所以。当他们添加图像时，html 如下所示：
<img src="....." />
But when they want to set the size manually the img tag becomes (tinymce):
但是当他们想手动设置大小时，img 标签变为 (tinymce)：
<img src="......" width="..." height="...." />
But. The image is still 80% of the page width! Is it possible to let the img width override the css image width?
但。图像仍然是页面宽度的 80%！是否可以让 img 宽度覆盖 css 图像宽度？
Thanks for your time Mattias.
感谢您的时间马蒂亚斯。
回答by Rahil Pirani
Try adding !importantto the inline CSS. That should force the new size to over-ride the defined CSS.
尝试添加!important到内联 CSS。这应该会强制新大小覆盖定义的 CSS。
For example:
例如：
<img src="......" style="width:50px !important;height:45px !important;" />
回答by NVRM
For overide all css, including inline style and css element style, do this:
要覆盖所有 css，包括内联样式和 css 元素样式，请执行以下操作：
* {
max-width:100% !important;
height:auto !important;
}
The * overide all css globally ;)
* 全局覆盖所有 css ;)
回答by TheBrockEllis
I believe that I have the same problem as the OP. I am using the editor TinyMCE 3.5.8 and when a user uses the editor to insert a photo with certain dimensions, using the 'advimage' plugin, the photo is sized using the HTML attributes (height="100" width="100")as opposed to CSS style (height:100px; width:100px;).
我相信我和 OP 有同样的问题。我正在使用编辑器 TinyMCE 3.5.8，当用户使用编辑器插入具有特定尺寸的照片时，使用“advimage”插件，照片的大小使用 HTML 属性(height="100" width="100")而不是 CSS 样式(height:100px; width:100px;)。
This is a known issue with TinyMCE bug report here.
这是 TinyMCE错误报告的一个已知问题。
The only way that I have found to make this somewhat work for resizing images is to add the "px" suffix to the end of the HTML attributes by going into the image.js (in my setup, its found in /path/to/tinymce/plugins/advimage/js/image.jsand edit:
我发现使这对调整图像大小有些作用的唯一方法是通过进入 image.js（在我的设置中，它在中找到/path/to/tinymce/plugins/advimage/js/image.js并编辑）将“px”后缀添加到 HTML 属性的末尾：
tinymce.extend(args, {
src : nl.src.value.replace(/ /g, '%20'),
width : nl.width.value + "px",
height : nl.height.value + "px",
Dirty hack, I know, but it seems to work for me.
肮脏的黑客，我知道，但它似乎对我有用。
回答by ???
.blogBody img
{
height:inherit;
}
回答by Nancy Hastings-Trew
Try using max-width: 80% instead of width: 80%, and height: auto that way the image will only be resized if it is larger than the available space, and the height will always be in proportion.
尝试使用 max-width: 80% 而不是 width: 80% 和 height: auto 这样图像只会在大于可用空间时调整大小，并且高度将始终成比例。
回答by deed02392
You are correct, element styles override any other specified styles. CSS operates on what is known as specificality rules, where the most specific rule overrides any less specific rule's properties.
你是对的，元素样式会覆盖任何其他指定的样式。CSS 在所谓的特殊性规则上运行，其中最具体的规则覆盖任何不太具体的规则的属性。
An element rule does not get more specific. Double check your markup.
元素规则不会变得更具体。仔细检查您的标记。
