センター/ミドル整列要素大きな

Question

EDIT：問題は

正しく理解されるように質問を言い替えるしようとすると、私はビデオ要素があるその中にdiv要素を持っています。 div要素はサイズ変更可能です。ビデオ要素のサイズ変更も必要ですが、元のアスペクト比も維持する必要があります。

.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>

だから私はここにvideo要素は、それのアスペクト比を失うことなく、水平方向と垂直方向の両方でセンタリングされるように、必要があります。この場合

.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>

、私は映像が垂直方向に伸ばしたいし、その後水平方向の中央。

コンテナの幅がビデオの幅よりも大きい場合も同様です。私は、ビデオを水平に伸ばし、垂直にセンタリングしたいと思っています。

これはCSSでのみ可能ですか？

Answer 1

max-widthおよびmax-height両方とも100%に設定されている場合、要素はその親よりも小さくなることがありません。アライメントは、通常ブロック要素を中心に置くのと同じです。

.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>