タテヨコ比を維持したままウィンドウサイズに合わせて大きさの変わるボックス
画像ならwidth100%を指定すれば良いですが、CSSで書くボックスの場合一工夫必要になります。
入れ子の包含要素にpadding-topを指定する
ボックスを入れ子にして、包含要素のpadding-topに横幅に対する縦幅の比率を%で指定することで表示できます。
HTML
|
1 2 3 4 5 |
<div class="wrapper"> <div class="inner"> 伸縮しても比率固定するボックス </div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.wrapper{ width: 100%; height: 100%; position: relative; padding:66.66% 0 0; margin-bottom:50px; } .inner{ width: 100%; height: 100%; background-color: #eee; text-align: center; position: absolute; top:0; left:0; } |
例えば横1200:縦800で表示したい場合3:2になるので
2÷3＝0.6666
これを%にして下記のように指定します。
padding: 66% 0 0;
4:3ならば75%、2:1なら50%など。
疑似要素でも表示可能
入れ子でなくても疑似要素でも同様に表示が可能です。
HTML
|
1 2 3 |
<div class="img-wrapper"> <img src="img/camera.jpg" alt=""> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.img-wrapper{ width: 100%; height: 100%; position: relative; padding:66.66% 0 0; } .img-wrapper::before{ content: ''; width: 100%; height: 100%; background: #000; opacity: 0; position: absolute; top:0; left:0; z-index: 1; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } .img-wrapper:hover::before{ opacity: 0.5; } .img-wrapper img{ width: 100%; position: absolute; top:0; left:0; } |
こんな具合にhover時に暗転する際に使えるテクニックです。
