Ovaj članak iz srpnja 2013. opisuje metodu upotrebe psuedo elemenata za održavanje omjera elemenata, čak i dok se skalira.
Evo kombinacije Sass-a koja malo pojednostavljuje matematiku.
@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; ) )Mixin pretpostavlja da ćete ugnijezditi element s klasom sadržaja unutar vašeg početnog bloka. Kao ovo:
insert content here this will maintain a 16:9 aspect ratio Korištenje mixina jednostavno je kao:
.sixteen-nine ( @include aspect-ratio(16, 9); )Proizlaziti:
.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
Evo demonstracije koja prikazuje gornji kôd na djelu. Animacija je dodana kako bi prikazala element koji održava zadani omjer slike dok se mijenja.
Pogledajte demo o održavanju odnosa omjera olovke, autora Sean Dempsey (@seanseansean) na CodePenu.
Hvala Seanu Dempseyu (@thatseandempsey) na ovom!