启用自动图像大小调整答案

【问题标题】：Enable automatic image resizing启用自动图像大小调整
【发布时间】：2012-01-26 11:31:12
【问题描述】：

像 IE 这样的浏览器在工具、选项、高级下都有一个“启用自动图像调整大小”复选框。说此功能与页面本身的 HTML 和/或 JavaScript 无关，是页面本身的 HTML 和/或 JavaScript 无法命令的功能是否正确？

我之所以问是因为我找不到一种方法来说服 HTML IMG 以根据窗口大小调整大小的方式运行，这当然会随平台而变化。可以设置 HTML IMG 像素高度和/或像素宽度，但这与窗口大小无关。并且可以设置 HTML IMG 百分比高度和/或百分比宽度，但这是相对于原始图像大小，而不是窗口大小。

我看到有人建议用设置高度和/或宽度限制的 HTML DIV 将 HTML IMG 装箱，但 HTML IMG 似乎突破了这些限制。同上 HTML HTML 和/或 HTML BODY 限制。在所有情况下，HTML IMG 似乎都有自己的想法，并且会限制自己，尤其是垂直方向，仅针对图像本身，而不是任何 HTML 容器。

如何训练 HTML IMG 根据容器和/或窗口大小运行？将不胜感激实际的例子而不仅仅是建议。谢谢。

【问题讨论】：

标签： html image

【解决方案1】：

img { width:100%; height: auto; } 会将您的图像调整为容器的大小，无论是您的图像容器还是文档。设置max-width 和min-width 会将图像限制为您想要的大小。

这是一个演示

http://jsfiddle.net/T6PvL/

只需按下结果窗口，您就可以看到图像是如何弯曲的。如果您想设置大小限制，只需声明 img { max-width:300px /*or any other size you like */，图像只会按照您的指示进行。

【讨论】：

这看起来正是我所需要的；月亮 JPG 被限制在一个盒子里，盒子本身就是可见窗口的一个子集。我已经捕获了 XHTML 源代码并将对其进行研究。谢谢。
恐怕没有帮助。请查看 www.discoverydata.net84.net 并单击 foo.xhtml。尽管 foo.xhtml 具有您推荐的 IMG CSS，但在 IE 9.0 中，在 BODY 中的 TABLE 内没有 IMG 的水平或垂直约束，而在 Safari 5.1.2 中，有水平约束 [和调整大小] 但没有垂直约束。奇怪的是，对于 foo.xhtml 的本地副本和这两个图像，IE 9.0 和 Safari 5.1.2 的行为是相同的，即水平但不是垂直约束。为什么 IMG CSS 被忽略？谢谢。
所以当您在 Safari 4 和/或 IE8 中单击 foo.xhtml 时，您看不到水平或垂直滚动条吗？您看到了两张图片，您看到了两张图片下方的标题，您看到了标题下方的三个 HTML 按钮，全部可见，无需任何滚动？难以置信！
我已经实现了一个 JavaScript，它由 onload 和 onresize 调用，以调整表格中配对图像的大小，使表格很好地保持在物理显示器的像素尺寸内。我知道它不能处理增加窗口尺寸的调整大小；只是有点懒。请参阅 www.discoverydata.net84.net 并单击 foo.htm。出于某种原因，原始实现 photo_p93.xhtml（当然是 xhtml 而不是 htm）不起作用，但这似乎是 webhost 的产物。 photo_p3.xhtml 可以完美地作为我笔记本电脑上的本地文件，适用于 IE9 和 Safare 5.1.2。

【解决方案2】：

您需要订阅窗口的调整大小事件。这是一个代码sn-p。每次调整窗口大小时都会触发它。该脚本只是将新维度设置为跨度

<script type="text/javascript">
    //<![CDATA[
    $(function () {
        $(window).resize(function (e, e1) {
            $("#wWidth").text($(window).width());
            $("#wHeight").text($(window).height());
        });
    });
    //]]>
</script>
<span id="wWidth"></span>
<span id="wHeight"></span>

编辑：

查看现场演示here

编辑： 调整窗口大小以查看正在运行的示例。

【讨论】：