如何覆盖bootstrap img高度和宽度属性？

Question

我使用twitter bootstrap 2.3.2，这个问题在很多地方都有讨论，但仍然无能为力。 Bootstrap已指定

img {
  width : auto\9;
  height: auto;
}

当我渲染图像时，这个引导程序的CSS会覆盖img标记的高度和宽度属性。我想通过css覆盖这种风格我无法做到这一点。问题尤其在IE中，因为他们使用了IE特定的样式属性。

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

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

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

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

Answer 1

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

将img的父元素的position属性指定为relative，然后根据需要将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;

Answer 2

你问......

  

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

...在这种情况下，我会回复，“是的！”显然，现在他们已经进入了3+，现在不会再有任何“更新”bootstrap 2.3了发布，所以你不必担心它会被更新“覆盖”。