使图像更小并保持比例？答案

【问题标题】：Make image smaller and preserve proportions?使图像更小并保持比例？
【发布时间】：2010-11-20 21:47:15
【问题描述】：

我有一个表格列，其中显示了此图像：

 <table width="200px" height="300px" align="center">
  <tr>
   <td><img src="...."></td>
  </tr>
 </table>

图片来源是动态的，所以图片大小不总是一样的...

这意味着我必须（在大多数情况下）调整图像的大小以使其变得更小。

如何以最简单的方式在保持比例的同时做到这一点？

谢谢

【问题讨论】：

不要设置尺寸；让浏览器决定它的大小。

标签： javascript html css browser layout

【解决方案1】：

只需设置一个width。

<img src="..." style="width: 200px">

如果您只指定一个维度，将自动保留比例。

【讨论】：

【解决方案2】：

如果您在 <img> 元素的样式中指定 width 或 height（但不能同时指定两者），则Aspect ratio 应为 preserved：

如果指定的大小只是一个确定的宽度或只是确定的高度，那么 CSS View Box 必须具有相同的宽度或高度，如合适的。另一个维度是计算如下：

如果对象具有固有纵横比，CSS 视图框必须具有相同的纵横比。

【讨论】：

【解决方案3】：

您是否尝试过 % 而不是 px 中的宽度/高度，即。

<img src="..." style="width: 90%">

【讨论】：

【解决方案4】：

将 id="imageID" 放在您的 img 选项卡上并调用以下 javascript：

  var elem = document.getElementById('imageID');
  if (elem == undefined || elem == null) return false;
  if (max == undefined) max = 100;
  if (elem.width > elem.height) {
    if (elem.width > max) elem.width = max;
  } else {
    if (elem.height > max) elem.height = max;
  }

【讨论】：