Question

我创建了一些页面来显示一个简单的图片库，只是中间的图片，下一页和后面点击它的两侧。图片大小平均约为800X1050，非常适合我的1920X1200显示器。我需要的是一种自动将图片大小调整到浏览器高度以便在较小的显示器上使用的方法，并且我在这个网站和其他网站上进行了大量搜索之后设法让它工作。我在我妻子的笔记本电脑上对此进行了测试，并对结果感到满意。但是，当我在我们的IE8浏览器上测试它时（不要问我为什么......），它不起作用。我将与这个画廊分享的一些人将不得不在我们可怕的过时计算机上查看它，所以我一直在尝试过去几天让它工作，我不能。这是我目前为每个图库页面提供的示例代码。当我从许多来源拼凑这些时，很可能会有一些不必要/冗余的位。任何有关此问题的帮助，甚至可能是任何改进都将非常感谢！

<html>
<title>Picture Gallery</title>

<head>
<style>

.numbering {
 vertical-align: top;
           }

img {
 max-height: 100%;
 vertical-align: middle;
    }

</style>
</head>

<body bgcolor="silver">

<center>

<img src="10.png" class="numbering">

<a href="previous-picture.html"><img border="0" src="back.png"></a>

<img src="picture.jpg">

<a href="next-picture.html"><img border="0" src="next.png"></a>

<img src="spacer.png" class="numbering">

</center>

</body>
</html>

Answer 1

由于Max-width属性在ie8中有效，因此使用width: inherit;使其在IE8中与纯CSS一起使用。

像这样

img {
  width: inherit;  /* This makes the next two lines work in IE8. */
  max-width: 100%; /* Add !important if needed for the code to work. */
  height: auto;    /* Add !important if needed. for the code to work */
}

在IE 8中需要图像自动调整大小到浏览器窗口

1 个答案: