Πώς να μειώσετε την εικόνα σε Html

Πίνακας περιεχομένων:

Πώς να μειώσετε την εικόνα σε Html
Πώς να μειώσετε την εικόνα σε Html

Βίντεο: Πώς να μειώσετε την εικόνα σε Html

Βίντεο: Πώς να μειώσετε την εικόνα σε Html
Βίντεο: #5.HTML5-CSS3.Εισαγωγή Εικόνων στην Σελίδα σου(Greek Web Tutorials) 2024, Απρίλιος
Anonim

Στη γλώσσα σήμανσης υπερκειμένου (HTML), χρησιμοποιείται μια ειδική εντολή "tag" για την εμφάνιση μιας εικόνας σε μια σελίδα. Αυτή η ετικέτα αναφέρεται ως img και περιέχει ένα σύνολο μεταβλητών - "χαρακτηριστικά". Με τη βοήθεια των χαρακτηριστικών, μπορείτε να προσδιορίσετε όλες τις πτυχές της εμφάνισης μιας εικόνας σε μια σελίδα υπερκειμένου, συμπεριλαμβανομένων των διαστάσεων της. Ωστόσο, αυτός δεν είναι ο μόνος τρόπος επίλυσης του προβλήματος - μπορείτε επίσης να μειώσετε το μέγεθος της εικόνας χρησιμοποιώντας Cascading Style Sheets (CSS).

Πώς να μειώσετε την εικόνα σε html
Πώς να μειώσετε την εικόνα σε html

Οδηγίες

Βήμα 1

Τοποθετήστε τα χαρακτηριστικά ύψους και πλάτους στην ετικέτα που είναι υπεύθυνη για την εμφάνιση της επιθυμητής εικόνας. Ορίστε το πρώτο στο κατακόρυφο μέγεθος της εικόνας και το δεύτερο οριζόντια. Ορίστε και τους δύο αριθμούς σε pixel, αλλά δεν χρειάζεται να υποδείξετε μονάδες - px - εδώ. Κατά τον υπολογισμό των απαραίτητων τιμών για αυτά τα χαρακτηριστικά, δώστε προσοχή στην τήρηση των αναλογιών της μείωσης της εικόνας, διαφορετικά θα εμφανίζεται σε παραμορφωμένη μορφή. Για παράδειγμα, για να βάλετε σε μια σελίδα μια μισή εικόνα από ένα αρχείο που ονομάζεται SomePic.jpg, των οποίων οι αρχικές διαστάσεις είναι 500 έως 300 pixel, η ετικέτα μπορεί να γίνει με την ακόλουθη εντολή:

Βήμα 2

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

Βήμα 3

Εάν θέλετε να καθορίσετε το μέγεθος της εικόνας χρησιμοποιώντας την περιγραφή των στυλ, χρησιμοποιήστε το ίδιο όνομα ετικέτας - img - και τα χαρακτηριστικά - πλάτος και ύψος. Σε αυτήν την περίπτωση, οι μονάδες μέτρησης - px, pt ή% - πρέπει πάντα να καθορίζονται. Για να ορίσετε το μισό του μεγέθους όλων των εικόνων στη σελίδα, τοποθετήστε την ακόλουθη καταχώριση στο μπλοκ περιγραφής στυλ: img {ύψος: 50%;} Εάν πρέπει να μειώσετε το μέγεθος μιας μόνο εικόνας, προσθέστε ένα πρόσθετο χαρακτηριστικό id στην ετικέτα της και αντιστοιχίστε μια μοναδική για τις εικόνες αυτής της τιμής σελίδας - για παράδειγμα, PicOne: Προσθέστε την ίδια τιμή στην εγγραφή στυλ, χωρίζοντάς την με ένα "hash" # από το όνομα της ετικέτας. Η πλήρης περιγραφή στυλ σε αυτήν την περίπτωση μπορεί να έχει την εξής μορφή: img # OnePic {ύψος: 50%;}

Συνιστάται: