如何覆盖引导 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 的高度和宽度属性?的主要内容,如果未能解决你的问题,请参考以下文章