css - WordPress 和 Twitter Bootstrap 图像拉伸(stretch)或最大宽度问题 : 100% not working

Question

我使用 Twitter Bootstrap v3.1.1 为客户创建了一个自定义 WordPress 主题。一切都很顺利，直到我意识到在 IE 和 Firefox 中图像显示完整大小并且超出了它们父元素的边界，即使我设置了 max-width: 100%。

自然地，我在互联网上搜索了一些选项，有人提到将 height:auto; 放在 img 标签上。这几乎奏效了，但图像开始在某些地方被拉伸(stretch)，而在其他地方仍然不遵守最大宽度。

这是侧边栏小部件中的图像不遵守 max-width: 100%

的示例

我四处搜寻，发现了更多针对 Firefox 和 IE 的黑客攻击。然后 Chrome 也开始出现问题。现在我有一个包含大量 CSS hack 的凌乱样式表，并且图像被拉伸(stretch)或显示完整尺寸仍然存在问题。其中一个建议是搞乱 box-sizing 并将 img 的宽度设置为 100%，这会导致下面的图像小于父容器的宽度被拉伸(stretch)。

我要回到我只使用 max-width: 100% 并重新开始的绘图板。

我的问题是:如何让 WordPress 上使用的所有图像都正确运行并遵循 max-width: 100% CSS 规则？这是一个响应式网站，我需要所有图像都保留在它们的容器内，不被拉伸(stretch)或倾斜，并且在随着浏览器大小的变化限制比例的同时扩大/缩小。

Answer 1

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

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

这将使您的所有图像都具有响应性，这还将填充它们的容器高达原始图像宽度的 100%，并调整高度以保持纵横比。

但是，如果您的图像容器是 1000 像素，而您的图像最初是 500x250，则图像只会填满容器的一半，因为 max-width: 100% 将使图像的最大宽度为 500 像素。

你可以使用

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

这将确保您的图像填满整个容器。但请注意 - 在上述 1000 像素容器/500 像素图像场景中，您的图像会放大并可能开始看起来像素化。

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

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

我敢打赌，您的侧边栏图像问题是某些样式(通过插件 css 或内联)覆盖了您的原始图像设置。