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

【问题标题】：How to Override bootstrap img height and width properties?如何覆盖引导 img 的高度和宽度属性？
【发布时间】：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 中看起来像原始图像大小一样大。

我正在寻找的是我无法通过内联样式属性设置高度和宽度，因为图像是通过第三方编辑器添加的。另外我直接使用 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;

【讨论】：