Question

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

<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>

有两张小图片：yandex标志，它是面向风景的图像（宽度＆gt;高度）来自南方公园的一个人的形象（这是我在谷歌发现的第一张面向人像）。它的高度大于宽度。如果javascript函数没有效果（尝试在开头插入“return;”），两个图像都很小并且位于表格单元格的中心。但是如果javascript函数有效，它只对面向横向的图像有效。所以我们可以看到Yandex徽标适合我想要的左右两侧，但是正确的图片并不适合顶部和底部。这是一个问题。

感谢。

Answer 1

这是你的问题的<center>反复无常。

删除每个<center>中的<td>应答器，并在每个style="text-align:center"上添加<td>以保持对齐。现在img.style.height = "100%";将应用于父<td>。

Answer 2

这有效：

<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>

我所做的就是删除<center>标签并使用CSS重做居中，在一些JS行的末尾添加几个结束;，删除img.style.position = "relative"，因为它在这种情况下什么都不做（你需要告诉它哪里被提出）并将<script>元素移到<head> - 没有必要让它工作但是做到了更具可读性。

然而，你正在做的事情并不总能产生你想要的结果，因为你的表格单元格不是明确的方形。因为单元格的形状由浏览器窗口的形状/大小决定（由于所有尺寸均以％表示）如果您获得的图像几乎方形，但略高于它很宽，浏览器的形状很高，图像会溢出单元格的垂直边缘（尝试加载上面的页面并调整大小，你会发现Stan溢出了容器的右侧）。

如果您坚持使用表格来执行此操作（应该使用DIV和CSS），您需要添加一个计算来说明您的容器不一定具有1：1的宽高比，或者最好明确地确定它们的大小，这样你总能知道它们的宽高比是什么。

编辑：我刚刚更改了上面的示例，因此您将图像本身传递给函数，而不是图像的ID，这样更有效率，因为您不再需要执行document.getElementById获取参考资料。

如何使图像适合边框并保持HTML中的纵横比

2 个答案: