Παράδειγμα

HTML

CSS

Αποτέλεσμα

Ανησυχίες για την προσβασιμότητα

Βεβαιωθείτε ότι τα στοιχεία που ορίζονται με ύψος δεν περικόπτονται και/ή δεν αποκρύπτουν άλλο περιεχόμενο όταν η σελίδα μεγεθύνεται για να αυξηθεί το μέγεθος του κειμένου.

Προδιαγραφές

Συμβατότητα προγράμματος περιήγησης

Ο πίνακας συμβατότητας σε αυτήν τη σελίδα δημιουργείται από δομημένα δεδομένα. Εάν θέλετε να συνεισφέρετε στα δεδομένα, ρίξτε μια ματιά στη διεύθυνση https://github.com/mdn/browser-compat-data και στείλτε μας ένα αίτημα έλξης.

Ενημερώστε τα δεδομένα συμβατότητας στο GitHub

Θρύλος

Γεια σας, αγαπητοί αναγνώστες! Σήμερα θα εξετάσουμε πώς να ορίσετε το μέγεθος των στοιχείων μπλοκ σε μια ιστοσελίδα χρησιμοποιώντας ιδιότητες CSS και να διαμορφώσετε την εμφάνιση του περιεχομένου εάν δεν ταιριάζει στο στοιχείο.

πλάτος και ύψος - πλάτος και ύψος στοιχείων σε css

Χρησιμοποιώντας τα χαρακτηριστικά στυλ πλάτους και ύψους, μπορείτε να ορίσετε το πλάτος και το ύψος των στοιχείων μπλοκ, αντίστοιχα:

πλάτος: αυτόματο|<ширина>|κληρονομούν
ύψος: αυτόματο|<ширина>|κληρονομούν

Ως τιμές, μπορείτε να χρησιμοποιήσετε οποιεσδήποτε μονάδες μέτρησης είναι διαθέσιμες σε css - για παράδειγμα, pixel (px), ίντσες (in), σημεία (pt) κ.λπ.:

p (πλάτος:200px; ύψος:150px)

Εκτός από τις απόλυτες μονάδες, μπορείτε να ορίσετε το σχετικό μέγεθος των στοιχείων ως ποσοστό. Σε αυτήν την περίπτωση, το πλάτος και το ύψος του στοιχείου θα εξαρτηθούν από το πλάτος και το ύψος του γονικού στοιχείου. Εάν ο γονέας δεν καθορίζεται ρητά, οι διαστάσεις θα εξαρτηθούν από το παράθυρο του προγράμματος περιήγησης.

div (πλάτος:40%;)

Το Auto αφήνει τον έλεγχο του μεγέθους των στοιχείων στο πρόγραμμα περιήγησης ιστού και είναι η προεπιλεγμένη τιμή. Σε αυτήν την περίπτωση, οι διαστάσεις του στοιχείου θα είναι τέτοιες ώστε να ταιριάζει απόλυτα με όλα τα περιεχόμενά του.

Ας δούμε μερικά παραδείγματα.

Αποτέλεσμα:

Σε αυτό το παράδειγμα, δημιουργήσαμε ένα div και τοποθετήσαμε μια παράγραφο p με κείμενο μέσα σε αυτήν. Για το div, ορίσαμε αυστηρά τις διαστάσεις στα 300 επί 300 pixel. Το στοιχείο p έχει τιμές ιδιοτήτων πλάτους και ύψους ίσες με αυτόματο, έτσι όπως μπορείτε να δείτε στο στιγμιότυπο οθόνης, το πλάτος του ορίζεται ίσο με το πλάτος του γονικού στοιχείου και το ύψος του είναι τέτοιο ώστε να ταιριάζει σε όλο το κείμενο που περιέχεται στο η παράγραφος.

Τώρα ας αλλάξουμε τις ρυθμίσεις css για την παράγραφο p και ας ορίσουμε σταθερές διαστάσεις:

Επίπεδο 2(
φόντο: #eee;
πλάτος: 250 px;
}

Αποτέλεσμα:

Όπως μπορείτε να δείτε, το πλάτος της παραγράφου έχει γίνει πιο στενό και ίσο με 250 pixel και το ύψος της έχει αυξηθεί ώστε να ταιριάζει το κείμενο, αφού η παράμετρος ύψους παρέμεινε ίση με το auto.

Τώρα ας ορίσουμε το ύψος και το πλάτος της παραγράφου σε ποσοστά:

Επίπεδο 2(
φόντο: #eee;
πλάτος:50%;
ύψος:50%;
}

Αποτέλεσμα:

Όπως μπορείτε να δείτε στην εικόνα, το πλάτος του στοιχείου p έχει γίνει ίσο με το μισό του πλάτους του στοιχείου div. Και το ύψος αυξήθηκε και έγινε ίσο με το 75 τοις εκατό του ύψους του div.

Όταν προσδιορίζετε το πλάτος και το ύψος οποιωνδήποτε στοιχείων σε σχετικές μονάδες, ίσως χρειαστεί να καθορίσετε τα ελάχιστα και μέγιστα δυνατά μεγέθη. Εξάλλου, για παράδειγμα, κατά την αλλαγή μεγέθους του παραθύρου του προγράμματος περιήγησης, οι διαστάσεις του στοιχείου μπορούν να μειωθούν και να αυξηθούν σε τέτοιο μέγεθος ώστε η αναγνωσιμότητα του ιστότοπου να γίνει πολύ χαμηλή.

Μπορείτε να ορίσετε το ελάχιστο πλάτος και ύψος χρησιμοποιώντας τα χαρακτηριστικά min-width και min-height:

ελάχ. πλάτος:<ширина>
ελάχ. ύψος:<высота>

Παρόμοια χαρακτηριστικά στυλ max-width και max-height σάς επιτρέπουν να ορίσετε μέγιστα μεγέθη:

μέγιστο πλάτος:<ширина>
μέγιστο ύψος:<высота>

Είναι σαφές ότι κατά τη ρύθμιση των μέγιστων και ελάχιστων τιμών για το ύψος και το πλάτος, οι διαστάσεις του στοιχείου δεν μπορούν να γίνουν μεγαλύτερες από τις μέγιστες και μικρότερες από τις ελάχιστες τιμές.

Αξίζει να διευκρινιστεί ότι η εργασία Οι παράμετροι ύψους και πλάτους έχουν νόημα μόνο για ετικέτες μπλοκ, δεδομένου ότι για τα ενσωματωμένα στοιχεία αυτές οι παράμετροι δεν υποβάλλονται σε επεξεργασία από το πρόγραμμα περιήγησης.

Μπορεί να συμβεί ότι όταν ορίζετε άκαμπτες παραμέτρους για το ύψος και το πλάτος ενός στοιχείου, το περιεχόμενο που περιέχει μπορεί να μην ταιριάζει στην περιορισμένη περιοχή.

Για παράδειγμα, ας μειώσουμε το μέγεθος της παραγράφου p από τα παραδείγματα που συζητήθηκαν παραπάνω σε 100 pixel:

Επίπεδο 2(
φόντο: #eee;
πλάτος: 100 px;
ύψος: 100 px;
}

Αποτέλεσμα:

Όπως μπορείτε να δείτε, το κείμενο έχει ξεπεράσει τα όρια της παραγράφου και δεν φαίνεται πολύ ωραίο. Για να αποφύγετε τέτοιες καταστάσεις, υπάρχει ένας κανόνας CSS - υπερχείλιση.

Παράμετρος υπερχείλισης για απόκρυψη (κρυφό, ορατό) ή κύλιση (κύλιση, αυτόματη) περιεχομένου

Η υπερχείλιση περιεχομένου μπορεί να συμβεί όταν τόσο το πλάτος όσο και το ύψος ενός στοιχείου είναι περιορισμένα. Ας δούμε δύο παραγράφους:

Κείμενο πρώτης παραγράφου

Κείμενο δεύτερης παραγράφου

Αποτέλεσμα:

Δεδομένου ότι δεν καθορίζεται ούτε το πλάτος ούτε το ύψος για τις παραγράφους, το πρόγραμμα περιήγησης υπολογίζει ανεξάρτητα με βάση τη δική του κατανόηση της τιμής του auto. Ως αποτέλεσμα, οι παράγραφοι καταλάμβαναν όλο τον διαθέσιμο χώρο σε πλάτος και σε ύψος ανάλογα με το περιεχόμενο που περιείχαν.

Τώρα ας περιορίσουμε το πλάτος της πρώτης παραγράφου:

Κείμενο πρώτης παραγράφου

Κείμενο δεύτερης παραγράφου

Αποτέλεσμα:

Το πλάτος της παραγράφου ήταν αναμενόμενο μειωμένο και το ύψος ορίστηκε για να χωράει ολόκληρο το κείμενο.

Λοιπόν, τώρα ας περιορίσουμε το ύψος της πρώτης παραγράφου:

Κείμενο πρώτης παραγράφου

Κείμενο δεύτερης παραγράφου

Ως αποτέλεσμα, αποδείχθηκε ότι το κείμενο δεν χωρούσε σε μια τόσο περιορισμένη παράγραφο και επομένως έτρεξε στην περιοχή του κάτω γείτονα. Συνεπώς, είναι πρακτικά αδύνατο να διαβάσετε το κείμενο είτε στην πρώτη είτε στη δεύτερη παράγραφο. Είναι ο έλεγχος της συμπεριφοράς του περιεχομένου σε τέτοιες καταστάσεις κανόνας υπερχείλισης:

υπερχείλιση: ορατό|κρυφό|κύλιση|αυτόματη|κληρονομιά

Από προεπιλογή, η υπερχείλιση έχει οριστεί σε ορατή, η οποία λέει στο πρόγραμμα περιήγησης να εμφανίζει περιεχόμενο που δεν χωράει στο κοντέινερ. Το αποτέλεσμα φαίνεται στο παραπάνω παράδειγμα.

Ο κανόνας κρύβει όλα όσα δεν χωρούν στο δοχείο:

Η τιμή κύλισης θα εμφανίζει κάθετες και οριζόντιες γραμμές κύλισης στο στοιχείο, ακόμη και αν ταιριάζει όλο το περιεχόμενο:

Κείμενο πρώτης παραγράφου

Κείμενο δεύτερης παραγράφου

Η πιο δημοφιλής και λογική λύση εάν χρειάζεται να δημιουργήσετε γραμμές κύλισης για ένα κοντέινερ είναι η τιμή αυτο. Σε αυτήν την περίπτωση, το ίδιο το πρόγραμμα περιήγησης θα καθορίσει πότε και σε ποιους άξονες θα εμφανίζει γραμμές κύλισης:

Κείμενο πρώτης παραγράφου

Κείμενο δεύτερης παραγράφου

Αποτέλεσμα:

Για να προσαρμόσετε τις γραμμές κύλισης, μπορείτε επίσης να χρησιμοποιήσετε τα χαρακτηριστικά στυλ υπερχείλισης-x και υπερχείλισης-y, τα οποία σας επιτρέπουν να προσαρμόσετε την εμφάνιση της κύλισης σε μεμονωμένους άξονες. Έτσι είναι υπεύθυνος για οριζόντιος άξονας, και για κάθετος άξονας.

Επομένως, εάν, για παράδειγμα, χρειάζεστε οριζόντια κύλιση για να μην εμφανίζεται ποτέ σε μια παράγραφο και κάθετη κύλιση για να εμφανίζεται μόνο όταν είναι απαραίτητο, τότε απλώς γράψτε τον ακόλουθο κανόνα css:

p(overflow-x:hidden;overflow-y:auto;)

Και το πρόβλημα θα λυθεί.

Αυτό είναι όλο. Μέχρι την επόμενη φορά. Μην ξεχάσετε να εγγραφείτε σε ενημερώσεις ιστολογίου και θα σας είμαι ευγνώμων εάν χρησιμοποιείτε τα κουμπιά κοινωνικών δικτύων.

Ύψος και πλάτος στοιχείουείναι υπολογισμένες ποσότητες. Κάθε στοιχείο μιας ιστοσελίδας σχηματίζει μια ορθογώνια περιοχή, η οποία με τη σειρά της αποτελείται από πολλές περιοχές - τομείς περιεχομένου, περιοχές παραγεμίσματος, περιοχές πλαισίουΚαι χωράφιαστοιχείο.

Μεταξύ του περιεχομένου του στοιχείου και των ορίων του βρίσκονται εσοχήγέμιση, έξω από το περίγραμμα του στοιχείου - χωράφιαπεριθώριο . Υπάρχει μια περιοχή περιεχομένου για κάθε στοιχείο· άλλες περιοχές είναι προαιρετικές.

1. Ύψος στοιχείου

Η ιδιότητα height καθορίζει το ύψος του περιεχομένου του στοιχείου μπλοκ και δεν έχει καμία επίδραση στην εμφάνιση των ενσωματωμένων στοιχείων: inline; . Το ύψος των ενσωματωμένων στοιχείων είναι ίσο με το ύψος του περιεχομένου τους. Δεν επιτρέπονται αρνητικές τιμές. Το ακίνητο δεν κληρονομείται.

Σύνταξη

P (ύψος: 100 px;)

2. Πλάτος στοιχείου

Η ιδιότητα πλάτος καθορίζει το πλάτος του περιεχομένου του στοιχείου μπλοκ και δεν έχει καμία επίδραση στην εμφάνιση των ενσωματωμένων στοιχείων: inline; . Το πλάτος των ενσωματωμένων στοιχείων είναι ίσο με το πλάτος του περιεχομένου τους. Δεν επιτρέπονται αρνητικές τιμές. Το ακίνητο δεν κληρονομείται.

Σύνταξη

P (πλάτος: 100 px;)

3. Ύψος και πλάτος ενός απολύτως τοποθετημένου στοιχείου

Ορίστε το πλάτος και το ύψος μιας απολύτως τοποθετημένης θέσης στοιχείου: απόλυτη; όχι πάντα απαραίτητο, αφού στην περίπτωση αυτή το ύψος και το πλάτος καθορίζονται σιωπηρά από τη μετατόπιση του στοιχείου. Εάν ένα στοιχείο έχει καθορισμένα περιθώρια και περιθώρια, μειώνουν το μέγεθος της περιοχής περιεχομένου κατά τις κατάλληλες τιμές.

Div ( φόντο: #6A7690; θέση: απόλυτη; επάνω: 0; κάτω: 0; αριστερά: 50%; δεξιά: 0; ) /*σε αυτήν την περίπτωση, το ύψος του στοιχείου είναι 100%, το πλάτος είναι 50% του το γονικό μπλοκ*/
Ρύζι. 2. Ύψος και πλάτος ενός απολύτως τοποθετημένου στοιχείου

4. Επένδυση στοιχείων

Χρησιμοποιώντας την ιδιότητα padding, μπορείτε να ρυθμίσετε το padding ταυτόχρονα για πολλές πλευρές ενός στοιχείου με την ακόλουθη σειρά: . Εάν το στοιχείο έχει φόντο, θα ισχύει και για το padding. Δεν επιτρέπονται αρνητικές τιμές. Το ακίνητο δεν κληρονομείται.

Εάν δοθούν τρεις τιμές, για παράδειγμα, div (επένδυση: 10px 20px 30px;), τότε θα διανεμηθούν με την ακόλουθη σειρά: η πρώτη τιμή είναι η επάνω επένδυση, η δεύτερη είναι η δεξιά και η αριστερή γέμιση, η τρίτη είναι η κάτω επένδυση.
Εάν δοθούν δύο τιμές, για παράδειγμα, div (επένδυση: 10px 20px;), τότε η πρώτη θα ορίσει την επάνω και την κάτω επένδυση, η δεύτερη θα ορίσει τη δεξιά και την αριστερή.
Μια μεμονωμένη τιμή, όπως div (επένδυση: 10 px;) , θα ορίσει την ίδια πλήρωση σε όλες τις πλευρές του στοιχείου.

Σύνταξη

P (επένδυση: 5px 10px 15px 10px;)

4.1. Επένδυση στη μία πλευρά ενός στοιχείου

Για να ορίσετε το padding μόνο στη μία πλευρά ενός στοιχείου, πρέπει να χρησιμοποιήσετε μία από τις ιδιότητες padding-top , padding-right , padding-bottom , padding-left , για παράδειγμα:

P (επένδυση-αριστερά: 10 px;)

5. Περιθώρια στοιχείων

Τα περισσότερα στοιχεία χωρίζονται μεταξύ τους με περιθώρια. Η ιδιότητα περιθωρίου είναι μια σύντομη φόρμα για την καταγραφή των πεδίων ενός στοιχείου με την ακόλουθη σειρά: πάνω, δεξιά, κάτω, αριστερά. Χρησιμοποιείται όταν χρειάζεται να ορίσετε περιθώρια σε πολλές πλευρές, αλλά όχι απαραίτητα σε τέσσερις. Τα κατακόρυφα παρακείμενα περιθώρια των στοιχείων του μπλοκ συμπτύσσονται και τα επάνω και κάτω περιθώρια δεν έχουν καμία επίδραση στα ενσωματωμένα στοιχεία. Επιτρέπονται αρνητικές τιμές. Το ακίνητο δεν κληρονομείται.

Εάν δοθούν τρεις τιμές, για παράδειγμα, div (περιθώριο: 10px 20px 30px;), τότε θα κατανεμηθούν με την ακόλουθη σειρά: η πρώτη τιμή είναι το πάνω περιθώριο, η δεύτερη είναι το δεξί και αριστερό περιθώριο, η τρίτη είναι το κάτω περιθώριο.
Εάν δοθούν δύο τιμές, για παράδειγμα, div (περιθώριο: 10px 20px;), τότε η πρώτη θα ορίσει τα επάνω και τα κάτω περιθώρια, η δεύτερη θα ορίσει τα δεξιά και τα αριστερά.
Μια μεμονωμένη τιμή, όπως div (περιθώριο: 10 px;) , θα ορίσει ίσα περιθώρια σε όλες τις πλευρές του στοιχείου.

(περιθώριο: 0 αυτόματο;) θα λειτουργήσει μόνο εάν το πλάτος του στοιχείου καθορίζεται ρητά.

Σύνταξη

Div (περιθώριο: 5px 10px 2px 5px;)

5.1. Περιθώρια στη μία πλευρά του στοιχείου

Οι ιδιότητες margin-top , margin-right , margin-bottom, margin-αριστερά ελέγχουν τα αντίστοιχα περιθώρια σε κάθε πλευρά του στοιχείου, για παράδειγμα:

P (περιθώριο-αριστερά: 10 px;)

6. Περιορισμός πλάτους και ύψους

Το CSS υποστηρίζει επίσης πολλές άλλες ιδιότητες που σχετίζονται με τη ρύθμιση του ύψους και του πλάτους των στοιχείων της ιστοσελίδας: ελάχιστο ύψος, ελάχιστο πλάτος, μέγιστο ύψος και μέγιστο πλάτος. Αυτές οι ιδιότητες σάς επιτρέπουν να ορίσετε τις ελάχιστες και μέγιστες τιμές για το πλάτος ή το ύψος ενός στοιχείου, δίνοντας στο στοιχείο τη δυνατότητα να γεμίσει τον διαθέσιμο χώρο. Οι ιδιότητες χρησιμοποιούνται συχνά για αποκριτικό σχεδιασμό ιστοσελίδων. Ισχύει για όλα τα στοιχεία εκτός από τα στοιχεία inline και του πίνακα. Έρχονται πάντα μετά τον κύριο κανόνα, δηλ. αφού δώσετε το ύψος ή το πλάτος του στοιχείου . Δεν κληρονομείται.

Μπορείτε να καθορίσετε κανονικές διαστάσεις χρησιμοποιώντας ορισμένες μονάδες μέτρησης και περιορισμούς μεγέθους χρησιμοποιώντας άλλες μονάδες, για παράδειγμα:

Div (πλάτος: 400 px; μέγιστο πλάτος: 50%; )

Το στοιχείο θα έχει πλάτος μόνο 400 εικονοστοιχεία εάν αυτή η τιμή δεν υπερβαίνει το 50% του πλάτους του μπλοκ κοντέινερ, διαφορετικά το πλάτος του θα μειωθεί.

Σε αυτό το άρθρο, θα δούμε πώς στο CSS μπορείτε να ορίσετε το ύψος ενός μπλοκ ως ποσοστό του πλάτους του. Ας εξετάσουμε τη χρήση αυτής της τεχνολογίας χρησιμοποιώντας το παράδειγμα δημιουργίας καρουζέλ (ρυθμιστικό) Bootstrap από εικόνες διαφορετικών μεγεθών.

Δημιουργία μπλοκ με ύψος που είναι ένα ορισμένο ποσοστό του πλάτους του

1. Δημιουργήστε μια δομή HTML 2 μπλοκ:
   Το πρώτο μπλοκ έχει 2 τάξεις. Χρησιμοποιώντας την κλάση που ανταποκρίνεται στα στοιχεία, θα ορίσουμε τη σχετική θέση του μπλοκ. Αυτό πρέπει να γίνει έτσι ώστε το μπλοκ 2 (το οποίο θα έχει απόλυτη τοποθέτηση) να βρίσκεται σε σχέση με αυτό. Επιπλέον, αυτή η κλάση χρησιμοποιείται επίσης για την προσθήκη ενός ψευδο-στοιχείου:πριν από το περιεχόμενο των αντίστοιχων στοιχείων (item-responsive). Αυτό το στοιχείο θα ορίσει το απαιτούμενο ύψος μπλοκ σε σχέση με το πλάτος του χρησιμοποιώντας την ιδιότητα padding-top CSS. Το κόλπο σε αυτήν τη μέθοδο είναι ότι εάν η ιδιότητα padding έχει οριστεί σε όχι σε pixel, αλλά ως ποσοστό, τότε θα υπολογιστεί από το πρόγραμμα περιήγησης σε σχέση με το πλάτος του. Με αυτόν τον τρόπο μπορείτε να πάρετε ένα μπλοκ με το απαιτούμενο ύψος. Το επόμενο βήμα είναι να δώσετε στο μπλοκ 2 μια απόλυτη θέση και να το ευθυγραμμίσετε με το πρώτο μπλοκ.
2. Προσθέστε τον ακόλουθο κώδικα CSS στη σελίδα: .item-responsive ( position: σχετική; /* σχετική τοποθέτηση */ ) .item-responsive:before ( display: block; /* εμφάνιση του στοιχείου ως μπλοκ */ περιεχόμενο: "" ; /* περιεχόμενο ψευδοστοιχείου */ πλάτος: 100%; /* πλάτος στοιχείου */ ) .item-16by9 ( padding-top: 56,25%; /* (9:16)*100% */ ) .item-responsive >.περιεχόμενο ( θέση: απόλυτη; /* απόλυτη θέση του στοιχείου */ /* θέση του στοιχείου */ επάνω: 0; αριστερά: 0; δεξιά: 0; κάτω: 0; ) /* Εάν είναι απαραίτητο (για μπλοκ που έχουν αυτές τις κλάσεις) */ .item -4by3 ( padding-top: 75%; /* (3:4)*100% */ ) .item-2by1 ( padding-top: 50%; /* (1:2) *100% */ ) .item -1by1 ( padding-top: 100%; /* (1:1)*100% */ )

Χρησιμοποιώντας την παραπάνω τεχνολογία για να δημιουργήσετε ένα καρουζέλ Bootstrap

Εάν δεν είστε εξοικειωμένοι με το Bootstrap και θέλετε να μάθετε τι είναι, μπορείτε να χρησιμοποιήσετε το άρθρο Εισαγωγή στο Bootstrap.

Ας δούμε ένα παράδειγμα στο οποίο θα χρησιμοποιήσουμε την παραπάνω δομή HTML και τον κώδικα CSS για να εμφανίσουμε τις διαφάνειες καρουζέλ Bootstrap.

Θα χρησιμοποιήσουμε τα ακόλουθα αρχεία ως εικόνες:

• carousel_1.jpg (πλάτος = 736 εικονοστοιχεία, ύψος = 552 εικονοστοιχεία, αναλογία διαστάσεων (ύψος προς πλάτος) = 1,33);
• carousel_2.jpg (πλάτος = 1155 εικονοστοιχεία, ύψος = 1280 εικονοστοιχεία, αναλογία διαστάσεων (ύψος προς πλάτος) = 0,9);
• carousel_3.jpg (πλάτος = 1846 εικονοστοιχεία, ύψος = 1028 εικονοστοιχεία, αναλογία διαστάσεων (ύψος προς πλάτος) = 1,8);
• carousel_4.jpg (πλάτος = 1140 εικονοστοιχεία, ύψος = 550 εικονοστοιχεία, αναλογία διαστάσεων (ύψος προς πλάτος) = 2,07);
• carousel_5.jpg (πλάτος = 800 εικονοστοιχεία, ύψος = 600 εικονοστοιχεία, αναλογία διαστάσεων (ύψος προς πλάτος) = 1,33);

Θα ορίσουμε τις εικόνες ως φόντο. Αυτό θα σας επιτρέψει να χρησιμοποιήσετε 3 εικόνες με άνισους λόγους διαστάσεων στο καρουσέλ Bootstrap.

Σήμανση HTML του καρουζέλ:

Κωδικός CSS Carousel:

Αντικείμενο-απόκριση ( θέση: σχετική; /* σχετική τοποθέτηση */ ) .item-responsive:before ( εμφάνιση: μπλοκ; /* εμφάνιση του στοιχείου ως μπλοκ */ περιεχόμενο: ""; /* περιεχόμενο ψευδοστοιχείου */ πλάτος : 100%; /* πλάτος στοιχείου */ ) .item-16by9 ( padding-top: 56,25%; /* (9:16)*100% */ ) .item-responsive>.content ( position: absolute; /* απόλυτη θέση του στοιχείου * / /* θέση στοιχείου */ επάνω: 0, αριστερά: 0, δεξιά: 0, κάτω: 0, μέγεθος φόντου: εξώφυλλο !σημαντικό; )

Για να δοθεί σε ένα αντικείμενο συγκεκριμένο πλάτος και ύψος, υπάρχουν δύο ιδιότητες στο CSS - πλάτος και ύψος (αντίστοιχα). Με τη βοήθειά τους, μπορείτε να ορίσετε σταθερά μεγέθη για στοιχεία, είτε πρόκειται για πλαϊνή γραμμή, εικόνα, πίνακα ή οποιοδήποτε μπλοκ.

Χαρακτηριστικά υπολογισμού πλάτους και ύψους

Μπορείτε να χρησιμοποιήσετε οποιαδήποτε μονάδα μήκους στο CSS για να ορίσετε το πλάτος ή το ύψος ενός αντικειμένου. Τα pixel είναι τα πιο εύκολα κατανοητά. Εάν χρησιμοποιείτε σημειογραφία ποσοστού, να έχετε κατά νου ότι το πλάτος του αντικειμένου θα εξαρτηθεί από το πλάτος του γονέα του. Εάν δεν υπάρχει κανένα, τότε το πλάτος του στοιχείου υπολογίζεται με βάση το πλάτος του παραθύρου του προγράμματος περιήγησης (αν ο χρήστης αλλάξει το πλάτος του παραθύρου, η τιμή του πλάτους θα υπολογιστεί εκ νέου).

Μπορείτε επίσης να χρησιμοποιήσετε τη μονάδα em ως τιμή πλάτους, η οποία είναι περίπου ίδια με το μέγεθος της γραμματοσειράς του κειμένου, αλλά μόνο σε συμβατικές μονάδες. Για παράδειγμα, ορίζετε το μέγεθος της γραμματοσειράς στα 24 px. Τότε το 1em για αυτό το στοιχείο θα είναι ίσο με 24 εικονοστοιχεία και αν ορίσετε πλάτος: 2em τότε το πλάτος θα είναι 2x24px = 48 pixel. Εάν το μέγεθος της γραμματοσειράς δεν έχει οριστεί, θα κληρονομηθεί.

Το ύψος, που καθορίζεται ως ποσοστό, υπολογίζεται με τον ίδιο τρόπο όπως το πλάτος, αλλά ο υπολογισμός βασίζεται στο ύψος του γονικού στοιχείου και όχι στο πλάτος του. Εάν δεν υπάρχει γονέας, το ύψος θα εξαρτηθεί από το ύψος του παραθύρου του προγράμματος περιήγησης.

Το ποσοστό πλάτους και ύψους του θυγατρικού στοιχείου υπολογίζονται με βάση τις διαστάσεις του γονέα

Τι περιλαμβάνεται σε πλάτος και ύψος

Αξίζει να θυμηθούμε αμέσως ότι οι ιδιότητες πλάτους και ύψους έχουν μια ιδιαιτερότητα - δεν περιλαμβάνουν τις τιμές του περιθωρίου, της επένδυσης και του περιγράμματος. Η τιμή που ορίζετε για το πλάτος/ύψος θα υποδεικνύει μόνο το πλάτος/ύψος της περιοχής περιεχομένου του στοιχείου.

Έτσι, για να υπολογίσουμε, για παράδειγμα, το πραγματικό πλάτος ενός στοιχείου (τον χώρο που θα καταλάβει στην οθόνη), απαιτείται λίγη αριθμητική. Το πραγματικό πλάτος είναι το άθροισμα των τιμών όπως το πλάτος, η επένδυση, το περίγραμμα και το περιθώριο. Θυμηθείτε ότι προηγουμένως εξετάσαμε πώς μοιάζει το μοντέλο κουτιού CSS.

Για να εμπεδώσουμε τη γνώση, θα δείξουμε ένα παράδειγμα. Ας υποθέσουμε ότι έχετε ένα στοιχείο με αυτό το στυλ:

Πλάτος: 200 px; περιθώριο-αριστερά: 15 εικονοστοιχεία; margin-right: 15px; padding-αριστερά: 10px; περίγραμμα-αριστερά: 3px συμπαγές #333;

Για να υπολογίσετε το πραγματικό πλάτος του στοιχείου, εκτελέστε την πρόσθεση:

πλάτος + περιθώριο-αριστερά + περιθώριο-δεξιά + padding-left + περίγραμμα-αριστερά = 200px + 15px + 15px + 10px + 3px = 243 px (πραγματικό πλάτος)

Η ιδιότητα ύψους μπορεί να είναι χρήσιμη εάν χρειάζεται να ελέγχετε με ακρίβεια, για παράδειγμα, το ύψος μιας εικόνας. Ωστόσο, εάν το κοντέινερ περιέχει κείμενο ή οποιοδήποτε άλλο περιεχόμενο που μπορεί να διαφέρει σε ύψος, δεν συνιστάται ιδιαίτερα να ορίσετε ένα σταθερό ύψος για το κοντέινερ, καθώς μια τέτοια διάταξη μπορεί να οδηγήσει σε ένα απροσδόκητο αποτέλεσμα - το περιεχόμενο θα εμφανίζεται στην κορυφή άλλου περιεχομένου.

Αντί για σταθερό ύψος, χρησιμοποιήστε ύψος: αυτόματη - αυτή η καταχώρηση σημαίνει ότι το ύψος του αντικειμένου θα υπολογιστεί αυτόματα, ανάλογα με το περιεχόμενο που περιέχει.

Ένας άλλος τρόπος για να αποφύγετε την κατάρρευση της διάταξης είναι να χρησιμοποιήσετε την υπερχείλιση: αυτόματη σημείωση. Σε αυτήν την περίπτωση, εάν το ύψος του περιεχομένου υπερβαίνει το ύψος του κοντέινερ του, το πρόγραμμα περιήγησης θα προσθέσει μια γραμμή κύλισης στο κοντέινερ.

Στο επόμενο μάθημα θα μάθετε πώς μπορείτε να παρακάμψετε το πλάτος ενός στοιχείου χρησιμοποιώντας μια ενδιαφέρουσα και πολύ χρήσιμη ιδιότητα