Javascript 如何在HTML中使图像与边框匹配并保持纵横比_Javascript_Html

Javascript 如何在HTML中使图像与边框匹配并保持纵横比

javascript html

Javascript 如何在HTML中使图像与边框匹配并保持纵横比,javascript,html,Javascript,Html,问题：有一个包含两个单元格的表。每个单元格中有两个图像。我需要将这些图像与边框相匹配，并保持纵横比。如果有横向图像，它应该适合左右边界。如果有纵向图像，它应该适合顶部和底部边界 <html><head><title>Test page</title></head><body> <script type="text/javascript"> function func(imgname){

问题：有一个包含两个单元格的表。每个单元格中有两个图像。我需要将这些图像与边框相匹配，并保持纵横比。如果有横向图像，它应该适合左右边界。如果有纵向图像，它应该适合顶部和底部边界

<html><head><title>Test page</title></head><body> 
    <script type="text/javascript"> 
    function func(imgname){
        var img = document.getElementById(imgname);
        if(img.height >= img.width) {
            img.style.height = "100%";
            img.style.position = "relative"
            img.style.width = "auto";
        }else{
            img.style.width = "100%";
            img.style.position = "relative"
            img.style.height = "auto";
        }
    }
    function rsz(imgname){
        alert('resize '+imgname)
    }
    </script> 


<center><table width="80%" height="90%" cellpadding="0" cellspacing="5" border="1">
<tr>
<td width="50%" height="80%" onclick="alert('pic 1') " id="td1" ><center>
<img id="imgL" onload="func('imgL');"  src="http://img.yandex.net/i/www/logo.png"  />
</center></td>
<td width="50%" height="80%" onclick="alert('pic 2') " id="td2" ><center>
<img id="imgR" onload="func('imgR');" src="http://t2.gstatic.com/images?q=tbn:ANd9GcROiXx6BaNBDTn4xAS8FBMH7qUZIOPKcXZKL6asl4hHw2ys-h8Z" />
</center></td></tr></table></center></body></html>

测试页面
函数func（imgname）{
var img=document.getElementById（imgname）；
如果（img.高度>=img.宽度）{
img.style.height=“100%”；
img.style.position=“相对”
img.style.width=“自动”；
}否则{
img.style.width=“100%”；
img.style.position=“相对”
img.style.height=“自动”；
}
}
函数rsz（imgname）{
警报（'调整大小'+imgname）
}

有两个小图片：yandex徽标，它是面向风景的图像（宽度>高度）还有一张来自南方公园的照片（这是我在谷歌上找到的第一张面向肖像的照片）。它的高度大于宽度。如果javascript函数无效（尝试在开头插入“return；”），则两个图像都很小，都位于表单元格的中心。但若javascript函数起作用，那个么它只对面向风景的图像有效。因此，我们可以看到Yandex的标志安装在左侧和右侧，如我所愿，但右侧的图片不适合顶部和底部。这里有一个问题

谢谢。

这是你的

应答器，会出问题

移除每个

中的

应答器，并在每个

上添加

style=“text align:center”

，以保持对齐。现在，

img.style.height=“100%”将应用于父级
此操作：
<html>

  <head>
    <title>Test page</title>
    <script type="text/javascript">
      function func (img) {
        if(img.height >= img.width) {
          img.style.height = "100%";
          img.style.width = "auto";
        } else {
          img.style.width = "100%";
          img.style.height = "auto";
        }
      }
      function rsz(imgname) {
        alert('resize '+imgname);
      }
    </script>
  </head>

  <body>
    <table width="80%" height="90%" cellpadding="0" cellspacing="5" border="1" style="margin-left:auto;margin-right:auto;">
      <tr>
        <td width="50%" height="80%" onclick="alert('pic 1') " id="td1" style='text-align: center;'>
          <img id="imgL" onload="func(this);"  src="http://img.yandex.net/i/www/logo.png"  />
        </td>
        <td width="50%" height="80%" onclick="alert('pic 2') " id="td2" style='text-align: center;'>
          <img id="imgR" onload="func(this);" src="http://t2.gstatic.com/images?q=tbn:ANd9GcROiXx6BaNBDTn4xAS8FBMH7qUZIOPKcXZKL6asl4hHw2ys-h8Z" />
        </td>
      </tr>
    </table>
  </body>

</html>


测试页
函数func（img）{
如果（img.高度>=img.宽度）{
img.style.height=“100%”；
img.style.width=“自动”；
}否则{
img.style.width=“100%”；
img.style.height=“自动”；
}
}
函数rsz（imgname）{
警报（“调整大小”+imgname）；
}

我所做的是删除
标记，用CSS重新居中，添加了两个关闭
在一些JS行的末尾，删除了img.style.position=“relative”
，因为它在这个上下文中没有做任何事情（你需要告诉它应该放在哪里），并将
元素移动到
中，这不是使它工作所必需的，但会使它更具可读性
然而，您所做的并不总是产生您想要的结果，因为您的表格单元格不是显式的正方形。因为单元格的形状是由浏览器窗口的形状/大小决定的（因为所有大小都以%表示）。如果得到的图像几乎是正方形，但略高于其宽度，并且浏览器的形状很高，则图像将溢出单元格的垂直边（尝试加载上面的页面并调整大小，您将看到斯坦从容器的右侧溢出）
如果您坚持使用一个表来实现这一点（实际上应该使用div和CSS），那么您需要添加一个计算来说明这样一个事实，即您的容器不一定具有1:1的纵横比，或者最好明确地调整它们的大小，以便您始终知道它们的纵横比是什么
编辑：我刚刚更改了上面的示例，因此您将图像本身传递给函数，而不是图像的ID，这更有效，因为您不再需要执行文档。getElementById
来获取引用。
虽然我不愿意用问题回答问题，但是否存在（非常）错误很好的理由是您使用表格来进行布局，而不是在css中完成所有工作？不幸的是，这种头痛的事情在基于表格的布局中经常发生。除非有很好的替代理由，否则我敦促您使用divs和cssI am dot javascript程序员或web设计器重新进行页面布局。我经常在C++/Java/P上编写程序现在我需要创建一个非常简单的HTML页面，我没有足够的时间学习javascript/css/HTML，所以我使用我所知道的：）@Alex Cool！您应该将此主题标记为已为其他人解决