Ez a 2013. júliusi cikk leírja a psuedo elemek használatának módszerét az elemek méretarányának fenntartására, még akkor is, ha méretez.
Itt van egy Sass keverék, amely kissé leegyszerűsíti a matematikát.
@mixin aspect-ratio($width, $height) ( position: relative; &:before ( display: block; content: ""; width: 100%; padding-top: ($height / $width) * 100%; ) > .content ( position: absolute; top: 0; left: 0; right: 0; bottom: 0; ) )A mixin feltételezi, hogy a kezdeti blokkban egy elemet fészkel be a tartalom osztályával. Mint ez:
insert content here this will maintain a 16:9 aspect ratio A mixin használata olyan egyszerű, mint:
.sixteen-nine ( @include aspect-ratio(16, 9); )Eredmény:
.sixteen-nine ( position: relative; ) .sixteen-nine:before ( display: block; content: ""; width: 100%; padding-top: 56.25%; ) .sixteen-nine > .content ( position: absolute; top: 0; left: 0; right: 0; bottom: 0; )Demó
Itt van egy bemutató, amely a fenti kódot mutatja működés közben. Az animáció hozzáadódik, hogy az elem átméretezéskor a hozzárendelt képarányt megtartsa.
Lásd Sean Dempsey (@seanseansean) Tollfenntartási képarány-bemutatóját a CodePen-en.
Köszönet Sean Dempsey-nek (@thatseandempsey) ezért!