Уменьшить изображение и сохранить пропорции?

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

Если указанный размер представляет собой просто определенную ширину или просто определенную высоту, то окно просмотра CSS должно иметь ту же ширину или высоту, в зависимости от ситуации.Другое измерение рассчитывается следующим образом:

1. Если объект имеет собственное соотношение сторон, окно просмотра CSS должно иметь такое же соотношение сторон.

Answer 3

Вы пробовали% вместо ширины / высоты в пикселях, т.е.

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

Answer 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;
  }