My goal is to insert a video into a container that has a width of 100% and automatically adjusts its height while maintaining the aspect ratio, but with a maximum height set. I want the video to completely fill the container even if some parts are cropped out, and be centered both horizontally and vertically.
I tried using the "fit-object" property, but it seems to not work when combined with "max-height."
To simplify, let's consider an image as an example, where the result should be the same.
HTML
<div>
<img src="...">
</div>
CSS
div {
width: 100%;
overflow: hidden;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}
Adding height: 100px to the div works fine, but having max-height: 100px causes issues. Is this expected behavior? If so, what can I do to make it work?
View the issue on jsFiddle: http://jsfiddle.net/1r4mLvLq/