Šajā 2013. gada jūlija rakstā ir aprakstīta psuedo elementu izmantošanas metode, lai saglabātu elementu malu attiecību, pat ja tā tiek mērogota.
Šeit ir Sass sajaukums, kas nedaudz vienkāršo matemātiku.
@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 pieņem, ka sākotnējā blokā jūs ligzdojat elementu ar satura klasi. Kā šis:
insert content here this will maintain a 16:9 aspect ratio Mixin lietošana ir tikpat vienkārša kā:
.sixteen-nine ( @include aspect-ratio(16, 9); )Rezultāts:
.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; )Demonstrācija
Piedāvājam demonstrāciju, kurā redzams iepriekšējais kods darbībā. Animācija tiek pievienota, lai parādītu elementu, saglabājot piešķirto malu attiecību, kad tas mainās.
Skatiet Sean Dempsey (@seanseansean) pildspalvveida pilnšļirces proporcijas demonstrāciju vietnē CodePen.
Paldies Šonam Dempsijam (@thatseandempsey) par šo!