Question

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

我问，因为我无法找到方法来说服HTML IMG以按窗口大小调整大小的方式行事，当然这可能因平台而异。可以设置HTML IMG像素高度和/或像素宽度，但这与窗口大小无关。可以设置HTML IMG百分比高度和/或百分比宽度，但这与原始图像大小有关，而不是窗口大小。

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

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

Answer 1

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

这是一个演示

http://jsfiddle.net/T6PvL/

只需按下结果窗口，即可看到图像如何弯曲。如果你想设置一个大小约束，只需简单地说明img { max-width:300px /*or any other size you like */，图像只会告诉它。

Answer 2

您需要订阅窗口的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

修改： 调整窗口大小以查看工作中的示例。

启用自动图像大小调整

2 个答案: