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

Posted

技术标签:

【中文标题】如何覆盖引导 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 编辑器呈现的。

以上是关于如何覆盖引导 img 的高度和宽度属性?的主要内容,如果未能解决你的问题,请参考以下文章

怎么js设置Img的宽度,和高度

jQuery如何获取img宽度

CSS3如何固定图片宽度使图片高度按图片比例自适应?

css实现宽度与高度成比例

图像大小应该在 img 标签的高度/宽度属性中定义还是在 CSS 中定义? [复制]

从img标签中省略宽度/高度属性