Question

我需要的是在Internet Explorer中将图像宽度的限制设置为100％，就像其他浏览器使用max-width一样。也就是说，如果图像的宽度大于包含区域的宽度，则它会向下缩小以适应包含区域的宽度，但如果它更小，则其大小不会改变。同样，如果图像位于表格单元格（td）内且比单元格大，我希望它缩放到单元格的大小，而不是扩展它。

虽然还有其他问题和答案似乎与此有关，但我无法让它们中的任何一个起作用。例如，通常建议此解决方案在Internet Explorer中模拟最大宽度：

http://www.svendtofte.com/code/max_width_in_ie/

本质上使用这个：

width:expression( 
    document.body.clientWidth > (500/12) * 
    parseInt(document.body.currentStyle.fontSize)?
        "30em":
        "auto" );
}

然而，当我尝试时，我根本没有得到预期的结果。在某些情况下，当我检查Firebug或类似的东西时，我得到宽度值-1并且根本没有显示图像。

我不知道这个解决方案是如何运作的。

编辑：

根据要求，这里有一些示例代码：

<table cellpadding="4" cellspacing="0"
    summary="" id="Push12Matt__simpletable_rph_vch_32" border="0" class="simpletable">
    <tr class="strow">
     <td valign="top" class="stentry" width="50%">
      <div class="fig fignone" id="Push12Matt__fig_6a268fd9-2a26-474f-83f5-528ffbab70d3"><a
        name="Push12Matt__fig_6a268fd9-2a26-474f-83f5-528ffbab70d3"><!-- --></a><p class="figcap"
        >Bild 1. Uponor Push 12</p>
       <a name="Push12Matt__image_4dd4d9ef-f95c-41f1-b423-7ddd3a2b0c06"><!-- --></a><img
        class="image" id="Push12Matt__image_4dd4d9ef-f95c-41f1-b423-7ddd3a2b0c06"
        src="/handbok/images/Push12/Push12_byggmatt.jpg" />
      </div>
     </td>

     <td valign="top" class="stentry" width="50%">
      <div class="fig fignone" id="Push12Matt__fig_689a2b08-ffbb-4f92-9a27-010e99665959"><a
        name="Push12Matt__fig_689a2b08-ffbb-4f92-9a27-010e99665959"><!-- --></a><p class="figcap"
        >Bild 2. Uponor ElPush 12</p>
       <a name="Push12Matt__image_f6d7c2fa-8ab3-4e46-b79c-e7881dff03e9"><!-- --></a><img
        class="image" id="Push12Matt__image_f6d7c2fa-8ab3-4e46-b79c-e7881dff03e9"
        src="/handbok/images/Push12/Push12Electronic_byggmatt.jpg" />
      </div>
     </td>

    </tr>
   </table>

简单的css（适用于IE以外的所有浏览器）：

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

但它不适用于IE中的此代码。也许它与它放在一个表中的事实有关，我不知道，但是当我在W3Schools上尝试这个div示例时，它运行正常： http://www.w3schools.com/cssref/playit.asp?filename=playcss_max-width&preval=50%25

编辑2：

示例完整HTML页面：

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="sv-se" xml:lang="sv-se">
    <head>
        <title>Image test</title>

        <style type="text/css">
            body {
                max-height : 100%;
                max-width : 100%;
                width : 500px;


            }
            img {
                max-height : 100%;
                max-width : 100%;
                width : auto;
                height : auto;
            }
            td
            {
                max-height : 100%;
                max-width : 500px;
                display : block;
            }</style>
    </head>
    <body id="frontpage">
        <h1 class="title topictitle1">Image test</h1>
        <div class="body conbody">
            <table>
                <tbody>
                    <tr>
                        <td>
                            <img src="Push12_byggmatt.jpg" />
                        </td>
                        <td>
                            <img src="Push12Electronic_byggmatt.jpg" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

此页面显示同样的问题。图像不会按比例缩小以适合表格单元格。在其他浏览器中，我可以根据需要调整窗口大小，并且图像只是按比例缩小。 IE8和9没有。所以似乎IE8和9支持最大宽度和最大高度，但仅适用于像素值，而不是百分比值 - 即它只有部分支持......如果我是正确的，我真的很惊讶它很难在互联网上找到关于此的任何信息。每个人都只是在谈论这些浏览器，因为它们在IE6之后最终支持它......

无论如何，我已经编写了一个jQuery解决方法，但我宁愿不需要它。所以如果有人能告诉我我错了并告诉我IE8和9实际上支持最大宽度百分比值我会很高兴错了： - ）

Answer 1

IE9至少支持max-width图像的百分比，但百分比是相对于图像的大小，而不是容器的大小。（您可以通过将100%更改为70%来查看此内容。）但是，如果您指定inherit而不是100%，它会按预期工作。这样做将继承IE9中max-width的容器大小。（我只在IE9，Firefox和谷歌浏览器中测试过您的示例页面，对于该页面来说，随着窗口宽度变小，图像将不断缩小。）但这不是一个完美的解决方案;在IE8浏览器模式下，以这种方式应用inherit将使表格单元格的宽度等于图像的未缩放宽度，即使图像被正确缩小。

Answer 2

你有什么特别的理由把div放在td里面吗？

我认为有两件事可能会干扰：

div。如果只有类和ID，请查看是否可以将其移动到td元素中。如果不能，请确保将其宽度和高度属性设置为100％。让它采用自动尺寸可能会干扰图像尺寸。
由于display: table-cell;的性质，它可能会中断，这是td通常默认的内容。尝试将其显示更改为块或内联块，然后查看是否可以解决问题，然后从那里开始（fyi - IE7不理解内联块，但是在找出导致图像的原因后你可以处理它问题）。

另一种选择是完全避免使用表格。您提供的代码表明您可能正在使用表格进行布局，这不是它们的意思。

此外，您对cellpadding和valign等属性的使用表明您的引用已经过时了。我强烈建议您了解更多当前的方法和标准。 Here's an article addressing cellpadding to get you started.

Answer 3

设置max-width: none解决了我的情况。

注意：已在IE11上测试

在Internet Explorer中设置最大宽度

3 个答案: