随浏览器大小调整图像大小，但横向和纵向 HTML 的百分比不同

Question

我环顾四周，但找不到关于这个确切主题的信息，我希望能得到一些帮助。

在我浏览器右侧的表格中，我有一张可以通过可点击链接点击的图片。它们是风景和肖像图像。横向图像为 900 x 700 像素，纵向图像为 540 x 700。我希望横向图像的最大尺寸为 900 x 700，并随着浏览器的大小相应缩小。

我已经能够使用下面的代码调整图像大小。

img src="jpegs/pict1.jpg" width="100%" alt="" name="slideImage"/

我在 java 脚本中有图像：

<script type="text/javascript">

var image = new Array("jpegs/pict1.jpg", "jpegs/pict2.jpg", 
"jpegs/pict10.jpg", 
"jpegs/pict9.jpg"
)

但是，即使我希望它们保持在最大 540 x 700 并相应地缩小，纵向图像也会倾斜到 900 宽度。是否可以添加代码来实现这一点？

Answer 1

要缩小元素，您必须在 resize 事件上使用 eventHandler，获取 clientWidth 和 Height 并通过 javascript 调整大小，您需要调整多少。如果您可以准确地告诉您需要的最大和最小尺寸以及该脚本可以支持的最大和最小分辨率，我可以提供一些更相关的代码。

 window.$getView = function() {
        var ret = {
            width : 0,
            height : 0,
            element : null
        };
        if( typeof window.innerWidth != 'undefined') {
            ret.width = window.innerWidth;
            ret.height = window.innerHeight;
            ret.element = window;
        } else if( typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
            ret.width = document.documentElement.clientWidth;
            ret.height = document.documentElement.clientHeight;
            ret.element = document.documentElement;
        } else {
            ret.width = document.getElementsByTagName('body')[0].clientWidth;
            ret.height = document.getElementsByTagName('body')[0].clientHeight;
            ret.element = document.getElementsByTagName('body')[0];
        }
        return ret;
    }

 window.addEventListener("resize",resizeHandler);
 resizeHandler : function(evt) {

   document.getElementById('someImage').style.width = window.$getView().width/10+'px';
   document.getElementById('someImage').style.height = window.$getView().height/10+'px';
 }

$getView 函数是一个跨浏览器的函数，用于获取页面的宽度和高度。 resizeHandler 具有调整所需元素大小的数学公式。在这里，您可以添加自己的页面百分比并设置最小和最大宽度或高度。