根据浏览器大小调整图像大小，但对于横向和纵向HTML则不同

Resize images along with browser size but different % for Landscape and Portrait HTML

本文关键字：横向 HTML 于横向 调整 浏览器 图像      更新时间：2023-09-26

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

在我的浏览器右边的表格中，我有一个图像，可以通过点击链接点击。它们是风景和肖像图像。风景图片尺寸为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"
)

但是，肖像图像也会倾斜到900宽，即使我想让它们保持在540 x 700的最大值并相应地缩小。是否可以添加代码来实现这一点?

要缩小元素，必须在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有数学公式来调整你想要的元素的大小。在这里，你可以添加你自己的页面百分比，并设置最小和最大宽度或高度

相关文章：