Question

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

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

图像源是动态的，因此图像的大小并不总是相同......

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

我怎样才能以最简单的方式保留比例？

由于

Answer 1

只需设置width。

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

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

Answer 2

如果您在width元素的样式中指定height或<img>，而不是两者，则{p> Aspect ratio应为preserved：

如果指定的大小只是一个   确定的宽度或确定的宽度   高度，然后CSS视图框必须   具有相同的宽度或高度   适当。另一个方面是   计算如下：


如果对象具有固有宽高比，则CSS视图框必须   具有相同的宽高比。

Answer 3

在你的img标签上输入id =“image ID”并调用以下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;
  }

Answer 4

你在px中尝试过％而不是宽度/高度吗？

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

使图像更小并保持比例？

4 个答案: