どうも！LSSです！！
ちょっとCSSでなにか（ってなに？ｗ）を作るにあたり、試してみたい事があったので試してみました。
縦横比3:4とoverflow:hidden;を試してみました
コード
<style><!--
@keyframes tbds{
0%{top:-20%;left:100%;}
30%{top:0%;left:0%;}
70%{top:0%;left:0%;}
100%{top:20%;left:-100%;}
}
--></style>
<div style="position: relative; width: 100%; padding-bottom: 75%; overflow: hidden; background-color: #ddddee;">
<div style="position: absolute; width: 100%; height: 100%; overflow: hidden; background-color: lightgreen; animation: tbds 5s linear 0s infinite; padding: 1em;">呼ばれて飛び出てじゃじゃじゃじゃーん</div>
</div>
外側のdivについて
divタグを入れ子にしています。（divタグをdivタグで囲んでいる、の意）
そして外側のdivタグに、
width: 100%; padding-bottom: 75%;
を設定しています。
widthは幅。100%はその親要素（この記事の例の場合、記事の表示部分）の幅いっぱいに表示する、という指定ですね。
そしてpadding-bottomは下からの余白で、75%と指定していますが、縦方向の余白なのにこの%は「幅に対しての」比率となります。
そのdivの中には別のdivが入っていますが、内側の方は「position:absolute;」を指定しているため「浮いた存在」となり、実質的に「外のdivの中に高さをとるようなものが何もない」事から、外のdivの高さはpadding-bottomで指定した通り「幅の75%」ジャストとなります。
そのため、「外側のdiv」で作った枠は幅4:高さ3の比率になります。
内側のdivについて
内側のdivは「浮いた存在」とは言え、外側のdivの中身である事に変わりはないので、
width: 100%; height: 100%;
の指定により「外側のdivと同じサイズ」の枠、という事になります。
このサンプルではアニメーションで「最初は外側の枠の右端を超えたところにいて、左端を超えたところまで移動する」という動きを指定しています。
本来なら、枠からはみ出した部分もはみだして表示される事になりますが、外側のdivに、
overflow: hidden;
を指定しているため、「はみ出した部分は表示しない」という事になっています。
知っていたはずなんですがｗ
overflowプロパティの存在は知っていたはずで、過去にも使っているのですが、こういう事ができるんですね。
「右にはみ出させたくない！」って時にどうしたものかと思いましたが、これを使う事で防げそうです^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
