CODEWITHSUNDEEP
javascripthtmlcssrevolution-slider
Eric Muriithi
Eric Muriithi

Reputation: 37

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

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>

Upvotes: 0

Views: 1693

Answers (1)

Shimi
Shimi

Reputation: 1218

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

Upvotes: 1

Related Questions