如何覆盖引导 img 的高度和宽度属性？

Posted 2023-03-06

【中文标题】如何覆盖引导 img 的高度和宽度属性？

【英文标题】：How to Override bootstrap img height and width properties?

【发布时间】：2013-12-24 04:24:30

【问题描述】：

我用的是twitter bootstrap 2.3.2，有这个问题很多地方都讨论过，但还是无能为力。 Bootstrap 已指定

img 
  width : auto\9;
  height: auto;

当我渲染图像时，img 标记的 height 和 width 属性被 bootstrap 的这个 css 覆盖。不幸的是，我想通过 css 覆盖这种样式，但我无法做到。问题尤其在 IE 中，因为他们使用了 IE 特定的样式属性。

小提琴链接：http://jsfiddle.net/fCMey/ 图像在 chrome 和 firefox 中看起来更小，但在 IE 中看起来像原始图像大小一样大。

我提到的其他修复方法是 https://github.com/twbs/bootstrap/issues/1899 - 我试过这不起作用。 类似的问题 How do I reset a twitter bootstrap reset to the browser's original

我正在寻找的是我无法通过内联样式属性设置高度和宽度，因为图像是通过第三方编辑器添加的。另外我直接使用 bootstrap.css，而不是 less 文件或任何其他方式。

是否有任何解决此问题的方法，或者我应该直接从 bootstrap.css 中删除 css ？

【参考方案1】：

你问...

或者我应该直接从 bootstrap.css 中删除 css

...在这种情况下，我会回答“是！”显然，引导 2.3 不会再有任何“更新”，因为它们已经进入 3+发布，因此您无需担心它会被更新“覆盖”。

【讨论】：

谢谢。必须使用此选项

【参考方案2】：

覆盖 bootstrap 的 css 的一个方法是创建您自己的自定义 css 文件，然后将该文件包含在您包含 bootstrap.css 的下方。

将 img 的父元素的 position 属性设为相对，然后根据需要将 width:100% 或 height:100% 应用于 img。

例如： 如果你的 html 如下：

<div id="parentdiv">
   <img src="path/to/img.jpg"/>
</div>

将 css 写入新的自定义 css 文件中，如下所示：

#parentdiv
    position: relative;


#position img
    width: 100%;

希望这能解决您的问题。

您也可以尝试在 width 属性的值旁边添加 !important（虽然不推荐）。

width: 100% !important;

【讨论】：

嗨，谢谢你的替代方案，但是当我尝试使用小提琴代码时，这并不能解决问题，而且我无法控制图像标签及其父级，因为它是通过微型 mce 编辑器呈现的。