Tämä heinäkuussa 2013 julkaistu artikkeli kuvaa menetelmää psuedo-elementtien käyttämiseksi elementtien kuvasuhteen ylläpitämiseksi, vaikka se skaalautuu.
Tässä on Sass-sekoitus, joka yksinkertaistaa matematiikkaa hieman.
@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; ) )Sekoituksessa oletetaan, että sisätät elementin, jonka sisältöluokka on alkuperäisessä lohkossa. Kuten tämä:
insert content here this will maintain a 16:9 aspect ratio Sekoituksen käyttö on yhtä helppoa kuin:
.sixteen-nine ( @include aspect-ratio(16, 9); )Tulos:
.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; )Demo
Tässä on demo, joka näyttää yllä olevan koodin toiminnassa. Animaatio lisätään näyttämään elementti, joka säilyttää määritetyn kuvasuhteen muutettaessa sitä.
Katso Sean Dempseyn (@seanseansean) kynän ylläpitosivusuhteen esittely CodePen -palvelusta.
Kiitos Sean Dempsey (@thatseandempsey) tästä!