引导程序 3 和 IE 10 的响应式图像大小调整问题

Question

我已经搜索了论坛，但似乎无法找到答案。我的图像在 FF、Chrome 和 IE 11 中都很好，但是在 IE 10 中，我的图像占据了整个页面，即使它们只有大约 300 像素宽。我正在使用带有 Joomla Purity III 模板的 bootstrap 3。我已经在 css 中看到了 hack：宽度：100% \9。我尝试删除 auto 的高度，但这似乎使我的图像消失了。这个问题的最佳/最简单的解决方案是什么？

 article img,
.article-intro img {
  display: block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  width: 100% \9;
  background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 0;
   /* line-height: 1.42857;*/
    padding: 4px;
    transition: all 0.2s ease-in-out 0s;
}
.img-responsive-left {
    float: left;
    display: block;
    max-width: 100%;
    width: 100% \9;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 0;
    line-height: 1.42857;
    padding: 4px;
    margin-right: 1em;
}
.img-responsive-right {
    float: right;
    display: block;
    max-width: 100%;
    width: 100% \9;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 0;
    line-height: 1.42857;
    padding: 4px;
}
.img-left-borderless {
    float: left;
    display: block;
    width: 100% \9;
    max-width: 300px;
    background-color: #ffffff;
    border: none;
    line-height: 1.42857;
    padding: 4px;
}

.img-rounded {
  border-radius: 0;
}
.img-thumbnail {
  padding: 4px;
  line-height: 1.42857143;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 0;
  display: inline-block;
  max-width: 100%;
  width: 100% \9;
  height: auto;
}

Answer 1

最好的解决方案？只需删除width: 100% \9;，这是一个hack。

更强大的解决方案是确保 css 不会影响已设置尺寸的图像（就像使用图像编辑器插入图像时一样），例如：

/* Don't ignore `width` and/or `height` attributes if present. */
img[width],
img[height] {
    max-width: none;
    width: auto;
}

Answer 2

尝试声明max-width: 300px，您可以通过在其末尾标记!important 来覆盖任何默认值。

max-width: 300px !important

如果这不起作用，那么查看更多代码以了解您的上下文会有所帮助。