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

【问题标题】：How to fit an image to borders and keep aspect ratio in HTML如何使图像适合边框并在 HTML 中保持纵横比
【发布时间】：2012-06-05 02:14:49
【问题描述】：

一个问题：有一个包含两个单元格的表格。每个单元格中有两个图像。我需要使这些图像适合边框并保持纵横比。如果有横向图像，它应该适合左右边框。如果有纵向图像，它应该适合上下边框。

<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 logo，是横向的图片（宽>高）和一个来自南方公园的人的图像（这是我在谷歌找到的第一张面向肖像的图像）。它的高度大于宽度。如果 javascript 函数无效（尝试在开头插入“return;”），则两个图像都很小并且位于表格单元格的中心。但是如果 javascript 函数有效，它只对横向图像有影响。所以我们可以看到 Yandex 徽标按照我的意愿安装在左右两侧，但右图没有安装在顶部和底部。这是一个问题。

谢谢。

【问题讨论】：

虽然我不愿意用问题来回答问题，但您是否有一个（非常）好的理由使用表格进行布局而不是全部在 css 中完成？不幸的是，这些令人头疼的问题在基于表格的布局中经常发生。除非有一个很好的压倒一切的理由，否则我敦促您使用 div 和 css 重做页面布局
我是 dot javascript 程序员或网页设计师。我经常在 C++/Java/Python 上编写程序，很少创建网页。现在我需要创建一个非常简单的 HTML 页面，而我没有足够的时间学习 javascript/css/html，所以我使用我所知道的 :))

标签： javascript html

【解决方案1】：

这是您的<center> 应答器，会造成问题。

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

【讨论】：

@Alex 酷！您应该将此主题标记为已解决给其他人

【解决方案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获取参考。

【讨论】：