CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JamesAnd
JamesAnd

Reputation: 430

Video/Image Slider resize to fit screen (both width and height)

I'm using this slider code to show my image and video:

Code:https://codepen.io/1wdtv/pen/jbjZeb

However the problem is that the slider is only responsive when it comes to the width. meaning if you resize your browser it will resize the image/video with it, without taking into regards its Height.

Is it possible to make the video/image fit exactly the screen from the height and width?

I want them to show on the screen witout having to scroll down in order to see the rest of the video/image. even if it meant stretching the video/image

Thank you

Upvotes: 0

Views: 2216

Answers (1)

SactoJosh
SactoJosh

Reputation: 376

You can add this to your CSS:

.slider-video {
  height: 100%;
}
video { 
  object-fit: fill;
}

This will make it take up the entire height. And it will stretch to fill the width. This may skew the video but you said that was acceptable.

Upvotes: 1

Related Questions