このエントリーをはてなブックマークに追加
Pocket

.container{ width:100%; margin:50px 0 auto; } .post{ width:100%; } .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; } .content{ width: 500px; height: auto; margin-left:-250px; vertical-align: center; position: absolute; top:50%; left:50%; } .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.7; } .img-wrapper img{ width: 100%; position: absolute; top:0; left:0; }

入れ子で比率固定するサンプル

伸縮しても比率固定するボックス

疑似要素で比率固定するサンプル

]]>