CSS αναγκάζει την εικόνα να αλλάξει μέγεθος και να διατηρήσει την αναλογία διαστάσεων

Question

Περισσότερα

Πηγή Μη AMP-έκδοση Επεξεργασία

CSS αναγκάζει την εικόνα να αλλάξει μέγεθος και να διατηρήσει την αναλογία διαστάσεων

Εργάζομαι με εικόνες και αντιμετώπισα ένα πρόβλημα με τις αναλογίες διαστάσεων.

<img src="big_image.jpg" width="900" height="600" alt="" />

Όπως μπορείτε να δείτε, το "ύψος" και το "πλάτος" έχουν ήδη καθοριστεί. Πρόσθεσα κανόνα CSS για τις εικόνες:

img {
  max-width:500px;
}

Αλλά για την big_image.jpg, λαμβάνω width=500 και height=600. Πώς μπορώ να ορίσω τις εικόνες να αλλάζουν μέγεθος, διατηρώντας τις αναλογίες διαστάσεων τους.

Cody Guldner

Επεξεργασμένη ερώτηση Κάνε Ιούνιος 2013 в 5:23

Προγραμματισμός

image css aspect-ratio

Κάνε Οκτώβριος 2012 в 6:20

15 προβολές

Hoffmann · Answer 1 · 2013-05-30T13:47:50+00:00

Η ιδιότητα background-size είναι δηλαδή μόνο για 9, αλλά αν αυτό σας βολεύει, μπορείτε να χρησιμοποιήσετε ένα div με background-image και να ορίσετε background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Τώρα μπορείτε απλά να ορίσετε το μέγεθος του div σας σε ό,τι θέλετε και όχι μόνο η εικόνα θα διατηρήσει την αναλογία διαστάσεων της, αλλά θα είναι επίσης κεντρικά τοποθετημένη τόσο κάθετα όσο και οριζόντια μέσα στο div. Απλά μην ξεχάσετε να ορίσετε τα μεγέθη στο css αφού τα divs δεν έχουν το χαρακτηριστικό width/height στην ίδια την ετικέτα.

Αυτή η προσέγγιση είναι διαφορετική από την απάντηση του setecs, χρησιμοποιώντας αυτή η περιοχή της εικόνας θα είναι σταθερή και θα ορίζεται από εσάς (αφήνοντας κενά διαστήματα είτε οριζόντια είτε κάθετα ανάλογα με το μέγεθος του div και την αναλογία διαστάσεων της εικόνας), ενώ η απάντηση του setecs θα σας δώσει ένα πλαίσιο που θα έχει ακριβώς το μέγεθος της κλιμακωτής εικόνας (χωρίς κενά διαστήματα).

Επεξεργασία: Σύμφωνα με την τεκμηρίωση MDN background-size documentation μπορείτε να προσομοιώσετε την ιδιότητα background-size στον IE8 χρησιμοποιώντας μια ιδιόκτητη δήλωση φίλτρου:

Αν και ο Internet Explorer 8 δεν υποστηρίζει την ιδιότητα background-size, είναι δυνατό να εξομοιώσετε ορισμένες από τις λειτουργίες του χρησιμοποιώντας τη μη τυποποιημένη συνάρτηση -ms-filter:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

el Dude · Answer 2 · 2012-10-20T18:30:53+00:00

el Dude

Πηγή Μη AMP-έκδοση Επεξεργασία

Αφαιρέστε την ιδιότητα "height".

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

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

el Dude

Επεξεργασμένη απάντηση Κάνε Ιούλιος 2013 в 2:35

17

0

Σχόλια (4)

Marat Tanalin · Answer 3 · 2012-10-20T18:37:36+00:00

Δεν υπάρχει τυποποιημένος τρόπος διατήρησης της αναλογίας διαστάσεων για εικόνες με width, height και max-width που καθορίζονται μαζί.

Έτσι είμαστε αναγκασμένοι είτε να καθορίσουμε τα width και height για να αποφύγουμε τα "άλματα" της σελίδας κατά τη φόρτωση των εικόνων, είτε να χρησιμοποιήσουμε το max-width και να μην καθορίσουμε διαστάσεις για τις εικόνες.

Ο προσδιορισμός μόνο του width (χωρίς το height) συνήθως δεν έχει πολύ νόημα, αλλά μπορείτε να προσπαθήσετε να παρακάμψετε το HTML-attribute height προσθέτοντας έναν κανόνα όπως IMG {height: auto; } στο φύλλο στυλ σας.

Δείτε επίσης το σχετικό [bug 392261] του Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=392261).