Αυτό το άρθρο από τον Ιούλιο του 2013 περιγράφει μια μέθοδο χρήσης στοιχείων psuedo για τη διατήρηση ενός λόγου διαστάσεων στοιχείων, ακόμη και όταν κλιμακώνεται.
Εδώ είναι ένα Sass mixin που απλοποιεί λίγο τα μαθηματικά.
@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 υποθέτει ότι θα τοποθετήσετε ένα στοιχείο με την κατηγορία περιεχομένου εντός του αρχικού σας μπλοκ. Σαν αυτό:
insert content here this will maintain a 16:9 aspect ratio Η χρήση του mixin είναι τόσο εύκολη όσο:
.sixteen-nine ( @include aspect-ratio(16, 9); )Αποτέλεσμα:
.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; )Διαδήλωση
Ακολουθεί μια επίδειξη που δείχνει τον παραπάνω κώδικα σε δράση. Το κινούμενο σχέδιο προστίθεται για να δείξει το στοιχείο που διατηρεί τον καθορισμένο λόγο διαστάσεων καθώς αλλάζει το μέγεθός του.
Δείτε την επίδειξη του Pen Maintain Aspect Ratio από τον Sean Dempsey (@seanseansean) στο CodePen.
Χάρη στον Sean Dempsey (@thatseandempsey) για αυτό!