Как сохранить пропорции изображения?

Есть такая штука, для background - background-size: contain, для img - object-fit: contain
Суть является в том, что эти свойства масштабирует фоновое изображение согласно заданным размерам.

$('#resize').bind('change',function(){ 
  var option = $(this).val(); 
  if(option=='background') { 
    $('.resize.background').hide(); 
    $('.resize.image').show(); 
  } else if(option=='image') { 
    $('.resize.image').hide(); 
    $('.resize.background').show(); 
  } 
});

body {margin: 0; width: 100wh; height: 100vh; overflow: hidden;} 
 
.resize { 
  display: block; 
  width: 350px; 
  height: 150px; 
  resize: both; 
  overflow: hidden; 
} 
 
.resize.background { 
  background: #000 url('https://via.placeholder.com/300x200') no-repeat center center / contain; 
} 
 
.resize.image img { 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
  background-color: #000; 
} 
 
select { 
  position: absolute; 
  left: 5px; 
  top: 5px; 
  z-index: 9999; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<!------> 
<div class="resize background"></div> 
<div class="resize image" style="display:none"> 
  <img src="https://via.placeholder.com/300x200"> 
</div> 
<select id="resize"> 
  <option selected>background</option> 
  <option>image</option> 
</select>

Если реально JS юзать, то можно попробовать это:

$(function(){
    $('#content img').load(function(){
       var $img = $(this);
       $img.attr('width', $img.width()).attr('height', $img.height());
    });
});

Мне кажется, лучше использовать % размеры:

<figure>
    <img src="image/redcat.jpg" alt="Рыжая кошка" width="100%">
</figure>
<style>
figure {
    width: 27%; /* Ширина */
    float: left; /* Выстраиваем элементы по горизонтали */
    margin: 0 0 0 3.5%; /* Отступ слева */
    background: #f0f0f0; /* Цвет фона */
    border-radius: 5px; /* Радиус скругления */
    padding: 2%; /* Поля */
}
figure:first-child {
    margin-left: 0; /* Убираем отступ для первого элемента */
}
</style>

Ели надо качество стараться сохранять, то вот для интерполяции:

<style>
   img { border: 1px solid #ccc; }
   .edge {
    image-rendering: -moz-crisp-edges; /* Firefox */
    -ms-interpolation-mode: nearest-neighbor;  /* IE */
    image-rendering: crisp-edges; /* Стандартное свойство */
   }
</style>
<img src="image/russia.png" alt="Флаг России" width="200">
<img src="image/russia.png" alt="Флаг России" width="200" class="edge">

Скорее всего один из вариантов тебе подойдет. Или попробуй искать отношения по высоте и ширине:

let img = $('#image');
let imgWidth = img.width();
let imgHeight = img.height();
let ratioWidth = $('body').width()/imgWidth;
let ratioHeight = $('body').height()/imgHeight;
$('span').append('<p>Ширина картинки: ' + imgWidth + '</p>');
$('span').append('<p>Высота картинки: ' + imgHeight + '</p>');
$('span').append('<p>Отношение по ширине: ' + ratioWidth + '</p>');
$('span').append('<p>Отношение по высоте: ' + ratioHeight + '</p>');
img.width(img.width()*ratioWidth);
img.height(img.height()*ratioHeight);