启用自动图像调整大小

问题描述：

工具，选项，高级下的浏览器，如IE，有一个复选框“启用自动图像大小调整”。说这个特性与页面本身的HTML和/或JavaScript没有任何关系，并且页面本身的HTML和/或JavaScript无法命令的功能是否正确？启用自动图像调整大小

我问，因为我找不到一种方式说服HTML IMG行为的方式，调整窗口大小，当然可以随平台而变化。可以设置HTML IMG像素高度和/或像素宽度，但不涉及窗口大小。而且可以设置HTML IMG百分比高度和/或百分比宽度，但这与原始图像大小有关，而不是窗口大小。

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

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

答

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，但IE9.0在BODY内部没有IMG横向或纵向的IMG内部约束，而Safari 5.1.2有水平约束[和调整大小]但没有垂直约束。奇怪的是，使用本地副本foo.xhtml和这两个图像，IE 9.0和Safari 5.1.2的行为相同，即水平但不垂直约束。为什么IMG CSS忽略了？谢谢。 –

@FrankNatoli必须在家测试，我的工作机器上只有Safari 4和IE8，并且在这两种情况下，图像按预期与浏览器按比例调整大小。 –

答

您将需要订阅窗口的resize事件。这是一段代码片段。每次调整窗口大小时都会触发它。该脚本只是设置新的尺寸为跨度

<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

编辑： 调整窗口大小才能看到的例子在工作。

启用自动图像调整大小

相关推荐