Πολλές φορές έχει χρειαστεί να δημιουργήσουμε μία διάταξη για μια thumbnail gallery που δουλεύουμε που να ανταποκρίνεται με όσο το δυνατόν μεγαλύτερη προσαρμοστικότητα στα μεγέθη των εικόνων και στο aspect ratio της καθεμιάς. Πρόσφατα συνειδητοποίησα ότι αυτή την ανάγκη τη διαχειρίζεται με πολύ αποτελεσματικό τρόπο η media library του διαχειριστικού περιβάλλοντος (admin panel) του WordPress. Και αυτό με έκανε να αναλύσω την τεχνική που χρησιμοποιείται σε αυτή την περίπτωση.
Με τη συγκεκριμένη τεχνική πετυχαίνουμε να έχουμε thumbnails στα οποία η φωτογραφία απεικονίζεται ολόκληρη κατά τον κατακόρυφο άξονά της, ενώ απεικονίζεται το κεντρικό τμήμα της, όσον αφορά τον οριζόντιο άξονά της. Το μήκος του τμήματος ορίζεται από το aspect ratio που έχουμε ορίσει για το κάδρο μας.
Δεν πρόκειται για κάτι εξαιρετικά απρόσιτο. Ουσιαστικά γίνεται ταυτόχρονη χρήση δύο διαδεδομένων CSS3 τεχνικών.
Της τεχνικής όπου σε ένα block level element διατηρείται σταθερό το aspect ratio κατά το resize.
Της τεχνικής όπου ορίζουμε ένα absolute positioned στοιχείο να είναι ομόκεντρο με το parent element του.
Για την υλοποίηση της τεχνικής χρειάζεται να ορίσουμε μία εμφωλευμένη δομή 5 επιπέδων, με 4 containers και τελευταίο το img element που θα φιλοξενεί την εικόνα που θέλουμε να ενσωματώσουμε.
Το πρώτο container ουσιαστικά υπαγορεύει το width του κάδρου. Θα μπορούσε άνετα να υλοποιείται ως ένα στοιχείο μίας λίστας (<li>) με float: left; positioning και ρητό width ή ως ένα Bootstrap cell. Αλλά ακόμα και ως ένα standalone element, με ρητό width, χωρίς να υπάρχει κάποια επιταγή για ομαδοποίηση ομοιογενών στοιχείων.
.cell{
position: relative;
width: $my-explicit-width;
}Το δεύτερο container (class="aspect-definition-container") υπαγορεύει το aspect ratio του κάδρου μέσα στο οποίο θα φιλοξενείται η εικόνα. Εδώ ουσιαστικά εφαρμόζεται η πρώτη τεχνική που αναφέραμε παραπάνω. Στο :before pseudo-element του .aspect-definition-container ορίζουμε τα εξής:
.aspect-definition-container{
position: relative;
width: 100%;
&:before{
display: block;
content: "";
padding-top: $width-percentage-of-choice;
}
}Η τεχνική αυτή βασίζεται στην ιδιότητα του padding να ορίζεται σε σχέση με το width του περιεχομένου του εκάστοτε element [1], όταν το padding δίνεται ως ποσοστό %. Εδώ, χρησιμοποιώντας μία SASS μεταβλητή, μπορούμε να ορίσουμε τελικά το ‘ύψος’ του padding, και ως εκ τούτου, να ορίσουμε τελικά ένα container του οποίου το aspect ratio θα παραμένει σταθερό κατά το resize.
Στο επόμενο επίπεδο συναντάμε το container του περιεχομένου μας, το οποίο τοποθετούμε με absolute positioning μέσα στο .aspect-definition-container ώστε αυτόματα να παίρνει τις διαστάσεις του γονεϊκού του container. Επίσης, θα ορίσουμε ότι το περιεχόμενό μας δε θα μπορεί να εκτείνεται πέρα από τα όρια του συγκεκριμένου container δίνοντας του overflow: hidden; Το scss θα έχει ως εξής:
.frame{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}Συνεχίζοντας, έχουμε το container το οποίο καλείται να υλοποιήσει το πρώτο σκέλος της δεύτερης τεχνικής στην οποία αναφερθήκαμε. Για να ορίσουμε ένα absolute positioned element να είναι ομόκεντρο με το γονεϊκό του element, χρησιμοποιούμε συνδυασμό absolute positioning και CSS3 transforms.
.centered{
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
transform: translate(50%, 50%);
}Το συγκεκριμένο container ουσιαστικά θέτει το origin point για το img element που θα περιέχει, στο κέντρο του εαυτού του. Αυτό συμβαίνει επειδή οι % οριζόμενες ποσότητες στο transform: translate() υπολογίζονται με βάση τις διαστάσεις που έχει το τρέχον element και όχι το γονεϊκό του. Και εδώ, οι διαστάσεις αυτές έχουν οριστεί ίσες με του γονεϊκού (width, height: 100%;).
Τέλος, εισάγουμε την εικόνα μας με ένα img element στο οποίο περιορίζουμε το ύψος να μην υπερβαίνει αυτο του γονεϊκού του container (max-heigth: 100%) καθώς και θέτουμε την αρχική του θέση στην πάνω αριστερή γωνία του τελευταίου. Το τελευταίο βήμα για το κεντράρισμα της εικόνας επιτελείται με την μετακίνηση του img element κατά το αρνητικό ήμισυ και των δύο του διαστάσεων σε σχέση με την αρχική του θέση. Με αυτό τον τρόπο, στον κατακόρυφο αξονα έρχεται ακριβώς να τεθεί εφαπτόμενο (ή να καταλήξει στη χειρότερη περίπτωση[2] πιο ‘μεσα’) στο σημείο που είχε αρχική θέση το γονεϊκό του .centered element, ή αλλιώς στο άνω border του .frame. Στον οριζόντιο άξονα μετακινείται στα αριστερά κατά το ήμισύ του width του, τοποθετώντας έτσι το κέντρο του πάνω στο κέντρο του .frame.
Σχηματικά αυτό απεικονίζεται ως εξής:
Το scss για το img element:
img{
position: absolute;
top: 0;
left: 0;
max-height: 100%;
transform: translate(-50%, -50%);
}[1] – http://bit.ly/2BUB0Gf
[2] – Αυτό συμβαίνει όταν το αρχείο εικόνας μας έχει width μικρότερο του .cell
https://creativecommons.org/licenses/by-sa/4.0/