Internet Explorer 7 中图像的最大宽度和最大高度

Question

Internet Explorer 又一次浪费了我的时间和金钱。

我正在制作一个响应式网站，我需要我的图片不超过其包含元素的 100% 宽度，但也不能超过一定百分比的高度，以防它们从页面上掉下来。

一些 CSS：

#content{

    margin:0 auto;
    min-width:320px;
    max-width:800px;
    width:80%;
    background-color:green;

}

#featured{

    position:relative;
    width:100%;

}

#featured-images{

    text-align:center;

}

#featured-images img{

    max-height:80%;
    height:auto !important; /* IE fix */
    height:80%; /* IE fix */

    max-width:100%;
    width:auto !important; /* IE fix */
    width:100%; /* IE fix *

}

一些标记：

<div id="content">
  <div id="featured">
    <div id="featured-images">
      <img src="lib/imgs/fi-1.jpg"/>
    </div>
  </div>
</div>

目前，此页面适用于 Chrome。它甚至适用于 IE6 和 IE8+。我还没有在 Firefox 或 Opera 中测试过它。但是 IE 7 绝对不会玩。它似乎将图像缩小到相当小的程度，就好像浏览器已被调整为树桩一样。

我知道这不太理想，但我一直在使用IE NetRenderer 进行测试。

Answer 1

Internet Explorer 条件注释样式表...

http://www.jabcreations.com/web/css/ieccss

在不启用 JavaScript 的情况下工作。

不需要破解，如果 IE 需要错误的值（例如高度/宽度）而不是您使用的值，那么只有您需要应用这些伪正确值的 IE 版本才能工作。

这将让您将所有与 IE 相关的讨厌的东西排除在您的主样式表之外，并且您可以为每个版本的 IE 使用特定的 IECCSS。

Answer 2

已修复，您可以在这里查看：

<style type="text/css">
#content {
    margin:0 auto;
    min-width:320px;
    max-width:800px;
    width:80%;
    background-color:green;
}
#featured {
    position:relative;
    width:100%;
}
#featured-images {
    text-align:center;
}
#featured-images img {
    max-height:100%;
    max-width:100%;
    height:auto;
    width:auto;
}
</style>

<div id="content">
    <div id="featured">
        <div id="featured-images">
            <img src="https://www.google.co.in/images/srpr/logo4w.png" />
        </div>
    </div>
</div>

或者在这里提琴http://jsfiddle.net/Fqebe/1/

干杯！