Center/middle align element larger than container

Question

EDIT: Trying to reword the question so that the problem is understood correctly

I have a div element within which there is a video element. The div element is resizable. The video element needs to be resizable too but it also needs to keep its original aspect ratio.

.container {
  background: #ff9;
  height: 150px;
  width: 100px;
}

.subcontainer {
  background: #9ff;
  min-width: 100%;
  min-height: 100%;
  margin: 5px;
}

.fixedsize{
  background: #9f9;
}

<div class="container">
  <div class="subcontainer">
    <video class="fixedsize" src="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy-hd.mp4" poster="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy_s.gif" autoplay="" loop="" playsinline=""></video>
  </div>
</div>

So I need, the video element here to be centered both horizontally and vertically without losing the aspect ratio of it.

.container {
  background: #ff9;
  height: 400px;
  width: 1000px;
}

.subcontainer {
  background: #9ff;
  min-width: 100%;
  min-height: 100%;
  margin: 5px;
}

.fixedsize {
  background: #9f9;
}

<div class="container">
  <div class="subcontainer">
    <video class="fixedsize" src="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy-hd.mp4" poster="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy_s.gif" autoplay="" loop="" playsinline=""></video>
  </div>
</div>

In this case, I want the video to stretch vertically and then centered horizontally.

Similar case for where the width of container is greater than the video width; I'd want the video to stretch horizontally and centered vertically.

Is this possible with only css?

Note, using double slash comments `//` in plain CSS might break the rules completely, so use `/* */` — Asons, Jul 05 '17 at 14:45
Answer is in the duplicate question. https://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elements — fasih.rana, Jul 05 '17 at 16:16

score 2 · Answer 1 · answered Jul 05 '17 at 12:42

max-width and max-height both set to 100% will force the element to stay smaller than its parent. The aligment is the same as one would usually do to center a block element.

.container {
  background: #ff9;
  height: 150px;
  width: 100px;
  //overflow: hidden;
}

.subcontainer {
  background: #9ff;
  min-width: 100%;
  min-height: 100%;
  margin: 5px;
  //overflow: hidden;
  position: relative;
}

.fixedsize{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  background: #9f9;
}

<div class="container">
  <div class="subcontainer">
    <video class="fixedsize" src="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy-hd.mp4" poster="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy_s.gif" autoplay="" loop="" playsinline=""></video>
  </div>
</div>

Note, using double slash comments `//` in plain CSS might break the rules completely, so use `/* */` — Asons, Jul 05 '17 at 14:45
So in your solution, I want the height to be stretched and the video element centered so that there is an overflow on the left and right of it (regardless of overflow hidden) — fasih.rana, Jul 05 '17 at 15:50

Center/middle align element larger than container

1 Answers1