Οι προγραμματιστές ορίζουν τη θέση μιας εικόνας για να δημιουργήσουν μια σαφή οπτική ιεραρχία προσδιορίζοντας τη σειρά και τις διαστάσεις της εικόνας σε σχέση με άλλα στοιχεία HTML. Τοποθετώντας την εικόνα σε διάφορες θέσεις, μπορούν επίσης να δημιουργηθούν μοντέρνα, μοναδικά και προσαρμοσμένα σχέδια που μπορούν να αλλάξουν την εμφάνιση και την αίσθηση του ιστότοπου. Αυτό το άρθρο παρουσιάζει τη διαδικασία για τον ορισμό της θέσης μιας εικόνας χρησιμοποιώντας CSS.
Πώς να ορίσετε τη θέση μιας εικόνας στο CSS;
Ορίζοντας τη θέση μιας εικόνας στο CSS, τα οφέλη όπως ' ακριβής τοποθέτηση », « επικαλυπτόμενο στοιχείο ' και ' ανταποκρίσιμος σχεδιασμός ” μπορεί να επιτευχθεί εύκολα. Χρησιμοποιώντας αυτά τα πλεονεκτήματα, οι προγραμματιστές μπορούν εύκολα να προσαρμόσουν και να δημιουργήσουν έναν πλήρως λειτουργικό και εντυπωσιακό ιστότοπο. Υπάρχουν δύο μέθοδοι/ιδιότητες με τις οποίες μπορεί να οριστεί η θέση μιας εικόνας. Αυτές οι ιδιότητες περιγράφονται παρακάτω:
Μέθοδος 1: Χρήση ιδιότητας Float
Ο ' φλοτέρ Η ιδιότητα ' παρέχεται από το CSS για τη μετακίνηση στοιχείων HTML στο ' αριστερά ' ή ' σωστά ' κατεύθυνση. Χρησιμοποιείται κυρίως κατά τη δημιουργία της αποκριτικής διάταξης για την ακριβή τοποθέτηση των στοιχείων HTML.
Για παράδειγμα, η ιδιότητα 'float' χρησιμοποιείται για τη στοίχιση εικόνων τόσο στην αριστερή όσο και στη δεξιά πλευρά της ιστοσελίδας:
< div >
< img src = 'bg.jpg' ύψος = '300px' πλάτος = '400px' τάξη = 'θέση Δεξιά' >
< img src = 'book.jpg' ύψος = '300px' πλάτος = '400px' τάξη = 'θέση αριστερά' >
div >
Στον παραπάνω κώδικα:
-
- Πρώτον, η ρίζα ' div ” δημιουργείται το στοιχείο που λειτουργεί ως κοντέινερ για στοιχεία HTML.
- Στη συνέχεια, δύο»
Οι ετικέτες ' χρησιμοποιούνται μέσα στο '
' ετικέτα.- Μετά από αυτό, οι τιμές του ' 300 εικονοστοιχεία ' και ' 400 εικονοστοιχεία ' παρέχονται στο ' ύψος ' και ' πλάτος 'ιδιότητες και των δύο'
ετικέτες '.
- Επίσης, αντιστοιχίστε μια τάξη ' θέση Δεξιά ' και ' θέση Αριστερά ' στην πρώτη και δεύτερη ετικέτα '
', αντίστοιχα.
Τώρα, εισάγετε το ' <στυλ> ετικέτα ” για να εφαρμόσετε τις ακόλουθες ιδιότητες CSS:
< στυλ >
.θέσηΔεξιά {
float: δεξιά;
}
.θέση Αριστερά {
float: αριστερά;
}
στυλ >
Η περιγραφή δίνεται παρακάτω:
-
- Πρώτα, επιλέξτε το ' θέση Δεξιά ' τάξη και ορίστε την τιμή του ' σωστά 'στο' του φλοτέρ ” ιδιοκτησία. Αυτό μετακινεί το επιλεγμένο στοιχείο HTML στη σωστή κατεύθυνση στην ιστοσελίδα.
- Στη συνέχεια, επιλέξτε το ' θέση Αριστερά ' τάξη και παρέχετε την τιμή του ' αριστερά ' στο ' φλοτέρ ” ιδιοκτησία. Αυτό μετακινεί το στοιχείο για να μετακινηθεί προς την αριστερή πλευρά.
Μετά το τέλος της φάσης σύνταξης:
Η έξοδος δείχνει ότι οι εικόνες έχουν ρυθμιστεί στην αριστερή και τη δεξιά θέση.Μέθοδος 2: Χρήση της ιδιότητας θέσης αντικειμένου
Ο ' αντικείμενο-θέση Η ιδιότητα ” εξασφαλίζει την τοποθέτηση της εικόνας ή του στοιχείου HTML σε μια συγκεκριμένη θέση στην ιστοσελίδα. Παρέχει έλεγχο στην οριζόντια και κάθετη τοποθέτηση, επιτρέποντας στον χρήστη να επιτύχει το επιθυμητό οπτικό αποτέλεσμα ή διάταξη. Χρησιμοποιείται κυρίως από προγραμματιστές για περικοπή εικόνων, δημιουργία μικρογραφιών, προσαρμοσμένες διατάξεις κ.λπ.
Αυτή η ιδιότητα μπορεί να λάβει τόσο αριθμητικές τιμές όσο και τιμές λέξεων-κλειδιών. Για παράδειγμα, παρέχονται τόσο αριθμητικές όσο και τιμές λέξεων-κλειδιών για το ' αντικείμενο-θέση ” ιδιοκτησία. Ορίζει τη θέση μιας εικόνας στο CSS στο παρακάτω απόσπασμα κώδικα:
< στυλ >
.numericalValues
{
αντικείμενο-θέση: 100px 20px;
}
.keywordValues
{
αντικείμενο-θέση: αριστερά;
}
στυλ >
< σώμα >
< div >
< img src = 'book.jpg' ύψος = '300px' πλάτος = '400px' τάξη = 'τιμές λέξης-κλειδιού' >
< img src = 'bg.jpg' ύψος = '300px' πλάτος = '400px' τάξη = 'numericalValues' >
div >
σώμα >
Στο παραπάνω απόσπασμα κώδικα:-
- Πρώτον, το « αριθμητικές Τιμές 'Η κλάση επιλέγεται μέσα στο ' <στυλ> ' ετικέτα. Και οι αριθμητικές τιμές του ' 100px 20px ' παρέχονται στο CSS ' αντικείμενο-θέση ” ιδιοκτησία. Ο ' 100 εικονοστοιχεία ' είναι ο χώρος που προστίθεται στην οριζόντια κατεύθυνση και το ' 20 εικονοστοιχεία ” για την κάθετη.
- Στη συνέχεια, το « Τιμές λέξης-κλειδιού ' επιλέγεται η κλάση και η τιμή της λέξης-κλειδιού ' αριστερά ' παρέχεται στο ' αντικείμενο-θέση ιδιότητα για ευθυγράμμιση της εικόνας προς την αριστερή κατεύθυνση.
- Μετά από αυτό, μέσα στο « <σώμα> Δημιουργούνται ετικέτες δύο εικόνων και οι κλάσεις που δημιουργήθηκαν παραπάνω εκχωρούνται σε αυτές.
Μετά το τέλος της φάσης μεταγλώττισης, η ιστοσελίδα εμφανίζεται ως εξής:
Το στιγμιότυπο δείχνει ότι οι εικόνες έχουν πλέον ρυθμιστεί σε συγκεκριμένες θέσεις.συμπέρασμα
Η θέση μιας εικόνας μπορεί να οριστεί χρησιμοποιώντας CSS ' φλοτέρ ' και ' αντικείμενο-θέση ' ιδιότητες. Ο ' φλοτέρ Η ιδιότητα λαμβάνει τη λέξη-κλειδί ως τιμή και μετακινεί το στοιχείο σε αριστερή ή δεξιά θέση. Από την άλλη πλευρά, το « αντικείμενο-θέση ”, λαμβάνει τόσο λέξεις-κλειδιά όσο και αριθμητικές τιμές σε οριζόντια και κάθετη κατεύθυνση. Αυτό το άρθρο παρουσιάζει τη διαδικασία για τον ορισμό της θέσης μιας εικόνας στο CSS.
- Μετά από αυτό, οι τιμές του ' 300 εικονοστοιχεία ' και ' 400 εικονοστοιχεία ' παρέχονται στο ' ύψος ' και ' πλάτος 'ιδιότητες και των δύο'