WordPress和Twitter Bootstrap图像出现拉伸或最大宽度问题：100％无法正常工作

使用Twitter Bootstrap v3.1.1, 我为客户端创建了自定义WordPress主题。一切都进行得很好, 直到我意识到在IE和Firefox中, 即使我设置了max-width：100％设置, 图像仍显示完整尺寸并超出其父元素的边界。

自然, 我在互联网上搜寻了一些选项, 有人提到将高度设置为：auto;在img标签上。这几乎可行, 但是图像在某些地方开始被拉伸, 而在其他地方仍然没有遵循最大宽度。

这是边栏中的小部件中的图像不遵循最大宽度的示例：100％

我搜寻了更多内容, 并且遇到了更多针对Firefox和IE的黑客。然后, Chrome也开始出现异常。现在, 我有一个凌乱的样式表, 其中包含大量CSS hack, 仍然存在图像被拉伸或显示完整尺寸的问题。建议之一是弄乱框大小, 并将img的宽度设置为100％, 这导致下面的图像小于拉伸的父容器的宽度。

我将回到绘图板上, 在这里我仅使用max-width：100％, 然后重新开始。

我的问题是：如何才能使WordPress上使用的所有图像正确运行并遵循max-width：100％CSS规则？这是一个响应迅速的网站, 我需要所有图像都保留在其容器中, 不要被拉伸或歪斜, 并且应随着浏览器大小的变化而在限制比例的同时增大/缩小。

#1

这不是因为Bootstrap和WordPress在一起-我们一直在使用它。你可以使用

img {height: auto; max-width: 100%;}

这样就可以使你的所有图像都具有响应性, 并可以将其容器填充到原始图像宽度的100％, 并调整高度以保持纵横比。

但是, 如果图像的容器为1000px, 并且图像的原始尺寸为500×250, 则该图像将仅填充容器的一半, 因为max-width：100％将使图像的最大宽度为500px。

你可以使用

img {height: auto; width: 100%;}

这样可以确保你的图片充满整个容器。但请注意-在上述1000px容器/ 500px图像的情况下, 你的图像将放大并可能开始看起来像像素化。

需要注意的另一件事-你的图片可能会在小部件中被覆盖。例如, 一个流行的侧边栏图像小部件将宽度和高度硬编码为内联样式(这是一种可怕的做法, 我希望他们停止这样做)。你可以覆盖它, 并使其与：

img[style] {height: auto !important; width: 100% !important;} //or
.widget[style] img {height: auto !important; width: 100% !important;}

我愿意打赌, 你的侧边栏图像问题是某些样式(通过插件css或内联)会覆盖你的原始图像设置。

#2

因此, 这最终并不是特定于Bootstrap或WordPress。这是

1. 我从谁知道{的位置复制了一种样式：display：inline-block; }
2. 在所有元素上进行引导框大小调整
3. WordPress在图像上使用width和height属性

在我取出怪异的{后, 显示：inline-block; }(我什至不知道怎么到达那里, 只能假设我很累又很忙碌), 大多数图像问题都消失了。我只需要定位一些图像实例即可使其正常工作。

我很高兴知道将来我可以使用Boostrap来帮助加快项目样式。谢谢大家的帮助！