<h1>ההגדרה object-fit של CSS</h1>
<div class="alert alert-primary" role="alert">
 <div>שחקו עם גודל התמונה וההגדרה object-fit ותוכלו לראות את התנהגות התמונה בכל מצב.</div>
  <div> גודל התמונה המקורי -<b> 300*300</b> פיקסלים</div>
</div>
<form id="object_fit_form" class="row">
  <div class="input-group col">
  <div class="input-group-prepend">
    <span class="input-group-text">width</span>
  </div>
  <input type="number" id="width" class="form-control" value="300">
  <div class="input-group-append">
    <span class="input-group-text">px</span>
  </div>
</div>
  <div class="input-group col">
  <div class="input-group-prepend">
    <span class="input-group-text">height</span>
  </div>
  <input type="number" value="300" id="height" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">px</span>
  </div>
</div>
  <div class="input-group col">
  <div class="input-group-prepend">
    <label class="input-group-text" for="object_fit_select">object-fit:</label>
  </div>
  <select class="custom-select" id="object_fit_select">
    <option selected>fill (default)</option>
    <option>contain</option>
    <option>cover</option>
    <option>none</option>
    <option>scale-down</option>
  </select>
</div>
</form>
<img src="http://cagdash.com/wp-content/uploads/2020/05/example.jpg" alt="Cagdash Share buttons" />

body{
  direction: rtl;
  text-align: center;
  font-family: arial;
}
form{
  direction: ltr;
}
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
img{
  width: 300px;
  height: 300px
}

jQuery('#object_fit_form').find('input, select').on('change, input', function(){
  var width = jQuery('#width').val();
  var height = jQuery('#height').val();
  var object = jQuery('#object_fit_select').val();
  jQuery('img').css({
    'height'     : height,
    'width'      : width,
    'object-fit' : object
  });
});