Έχω
body {
background: url(images/background.svg);
}
Το επιθυμητό αποτέλεσμα είναι ότι αυτή η εικόνα φόντου θα έχει πλάτος ίσο με αυτό της σελίδας, ενώ το ύψος θα αλλάζει για να διατηρείται η αναλογία. π.χ. αν η αρχική εικόνα τυχαίνει να είναι 100*200 (οποιεσδήποτε μονάδες) και το σώμα έχει πλάτος 600px, η εικόνα φόντου θα πρέπει να καταλήξει να έχει ύψος 1200px. Το ύψος θα πρέπει να αλλάζει αυτόματα αν το παράθυρο αλλάξει μέγεθος. Είναι αυτό δυνατό;
Αυτή τη στιγμή, ο Firefox μοιάζει σαν να'κάνει το ύψος να ταιριάζει και στη συνέχεια να προσαρμόζει το πλάτος. Μήπως αυτό συμβαίνει επειδή το ύψος είναι η μεγαλύτερη διάσταση και προσπαθεί να αποφύγει την περικοπή; Θέλω να περικόψω κάθετα και μετά να κάνω κύλιση: όχι οριζόντια επανάληψη.
Επίσης, το Chrome τοποθετεί την εικόνα στο κέντρο, χωρίς επανάληψη, ακόμη και όταν δίνεται ρητά η ρύθμιση background-repeat:repeat
, η οποία είναι η προεπιλεγμένη ούτως ή άλλως.
Υπάρχει μια ιδιότητα CSS3 γι' αυτό, συγκεκριμένα [background-size
][1] ([έλεγχος συμβατότητας][2]). Ενώ μπορεί κανείς να ορίσει τιμές μήκους, συνήθως χρησιμοποιείται με τις ειδικές τιμές contain
και cover
. Στη δική σας συγκεκριμένη περίπτωση, θα πρέπει να χρησιμοποιήσετε το cover
:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
contain
και cover
Συγγνώμη για το κακό λογοπαίγνιο, αλλά θα χρησιμοποιήσω την εικόνα της ημέρας από τον Biswarup Ganguly για επίδειξη. Ας πούμε ότι αυτή είναι η οθόνη σας και η γκρίζα περιοχή είναι έξω από την ορατή οθόνη σας. Για την επίδειξη, θα υποθέσω αναλογία 16x9.
![screen][3]
Θέλουμε να χρησιμοποιήσουμε την προαναφερθείσα εικόνα της ημέρας ως φόντο. Ωστόσο, για κάποιο λόγο περικόψαμε την εικόνα σε 4x3. Θα μπορούσαμε να ορίσουμε την ιδιότητα background-size
σε κάποιο σταθερό μήκος, αλλά θα επικεντρωθούμε στις ιδιότητες contain
και cover
. Σημειώστε ότι υποθέτω επίσης ότι δεν παραποιήσαμε το πλάτος και/ή το ύψος του body
.
contain
contain Κλιμακώνουμε την εικόνα, διατηρώντας την εγγενή αναλογία διαστάσεων της (αν υπάρχει), στο μεγαλύτερο μέγεθος τέτοιο ώστε τόσο το πλάτος όσο και το ύψος της να χωράνε μέσα στην περιοχή τοποθέτησης φόντου.
Αυτό διασφαλίζει ότι η εικόνα φόντου περιέχεται πάντα πλήρως στην περιοχή τοποθέτησης φόντου, ωστόσο, σε αυτή την περίπτωση μπορεί να υπάρχει κάποιος κενός χώρος που γεμίζει με το background-color
σας:
![contain][4]
cover
cover Κλιμακώνει την εικόνα, διατηρώντας την εγγενή αναλογία διαστάσεων της (εάν υπάρχει), στο μικρότερο μέγεθος ώστε τόσο το πλάτος όσο και το ύψος της να μπορούν να καλύψουν πλήρως την περιοχή τοποθέτησης φόντου.
Αυτό εξασφαλίζει ότι η εικόνα φόντου καλύπτει τα πάντα. Δεν θα υπάρχει ορατό χρώμα φόντου
, ωστόσο ανάλογα με την αναλογία της οθόνης'ένα μεγάλο μέρος της εικόνας σας θα μπορούσε να αποκοπεί:
![cover][5]