how to get images on revolution slider to fit perfectly onto the browser (HTML)

Question

so I bought this template and was wondering how I could get images on the revolution slider to fit perfectly in the browser. At the moment the images are being cut at the top and the bottom. Assistance will really be appreciated. Thanks in advance!

<div id="rev_slider_4_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.4.7">
  <ul>

    <li data-index="rs-10" data-transition="random" data-slotamount="default" data-hideafterloop="0" 
      data-hideslideonmobile="off" data-easein="default" data-easeout="default" data- 
      masterspeed="default" data-thumb="assets/img/slider/three/100x50_slider-home2.jpg" data- 
      rotate="0" data-saveperformance="off" data-title="Slide" data-param1="" data-param2="" data- 
      param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data- 
      param9="" data-param10="" data-description="">

        <img src="assets/images/mult.jpg" alt="" data-bgposition="center 
          center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
        <!-- LAYERS -->

        <!-- LAYER NR. 1 -->
                    
    </li>
  </ul>
</div>

Answer 1

Try to use styling of object-fit:

.contain {
  object-fit: contain;
}

<img src="assets/images/mult.jpg" alt="" data-bgposition="center 
          center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg contain" data-no-retina>

To read more and see more options of object-fit visit here