Προσαρμόσιμη οθόνη εικόνας HTML 5 img κώδικας αναλογικής κλίμακας για την ιστοσελίδα HTML XNUMX

Λόγω της άνθησης του Διαδικτύου για κινητά,WeChat MarketingΗ δημοτικότητα των κινητών τηλεφώνων έχει γίνειΗ ζωήαπαραίτητο εργαλείο.

φτιάξτε μια ιστοσελίδαπρότυπο, συνιστάται η χρήσηWordPressΠροσαρμοστικό θέμα για:

Τι σημαίνει προσαρμογή εικόνας CSS;

Η αυτοπροσαρμογή εικόνας CSS αναφέρεται στη δημιουργία των εικόνων στην ιστοσελίδα html, μέσω κώδικα CSS:

Επόμενο,Chen WeiliangΘα μοιραστώ μαζί σας τον κώδικα αναλογικής κλιμάκωσης CSS img ^_^

Προσαρμόσιμος κώδικας ύψους και πλάτους εικόνας CSS

Εισαγωγή εικόνας σε html:

Εάν θέλετε η εικόνα να προσαρμόζεται στο μικρό μέγεθος της οθόνης αντί να παραμένει σταθερή σε πλάτος και ύψος.

Μπορείτε να προσθέσετε τον ακόλουθο κώδικα στο αρχείο style.css του θέματος WordPress ▼

/*图片自适应宽度和高度*/ 
img { max-width: 100%; height: auto; width: auto\9; width: auto; }

δήλωση εδώmax-widthκανόνας μέγιστου πλάτους

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

width:auto;σημαίνει αυτόματο πλάτος

\9 Είναι ένας τρόπος γραφής hack css.

• Με αυτόν τον τρόπο, το "\9" προστίθεται στον κανονικό κώδικα css, μόνο το πρόγραμμα περιήγησης IE μπορεί να το αναγνωρίσει, άλλα προγράμματα περιήγησης θα αγνοήσουν αυτήν τη δήλωση.
• Αυτό θα επιτύχει διαφοροποίηση του προγράμματος περιήγησης, επιτρέποντας τον σκοπό των συμβατών προγραμμάτων περιήγησης.

Γιατί να μην χρησιμοποιήσετε πλάτος: 100%;

Για να επιτύχετε αυτόματη κλιμάκωση των εικόνων, μπορείτε επίσης να χρησιμοποιήσετε τις πιο συχνά χρησιμοποιούμενες ιδιότητες πλάτους, π.χ.width：100％.

Ωστόσο, αυτός ο κανόνας δεν ισχύει εδώ.

• Επειδή αυτός ο κανόνας θα το κάνει να φαίνεται τόσο φαρδύ όσο το δοχείο του.
• Σε περιπτώσεις όπου το δοχείο είναι πολύ ευρύτερο από την εικόνα, η εικόνα θα τεντωθεί άσκοπα.

προφυλάξεις

Τι είναι οι επιλογείς CSS; Ποια είναι η διαφορά μεταξύ κλάσης και αναγνωριστικού;Τα παρακάτω σεμινάρια μιλούν για το ▼

Ποια είναι η διαφορά μεταξύ της κλάσης επιλογέα CSS και του αναγνωριστικού; χρήση αναγνωριστικού και κλάσης σε HTML

Ποια είναι η διαφορά μεταξύ της κλάσης επιλογέα CSS και του αναγνωριστικού; Η χρήση του αναγνωριστικού και της κλάσης σε HTML Chen Weiliang εκτελεί αυτήν τη στιγμή SEO και βελτιστοποιεί το θέμα WordPress του ιστότοπου.Αν και έχω μάθει κάποιες βασικές γνώσεις HTML και CSS στο παρελθόν, αλλά δεν το χειρίζομαι για λίγο, ειδικά το τμήμα CSS...

Πώς ο ιστότοπος για κινητά αναπαράγει βίντεο MP4 προσαρμοσμένο στη σελίδα;Κάντε κλικ στον παρακάτω σύνδεσμο ▼

Πώς προσαρμόζεται η ιστοσελίδα H5 MP4 στη σελίδα; Ο ιστότοπος για κινητά αναπαράγει κώδικα html βίντεο

Το μάρκετινγκ βίντεο είναι αναπόσπαστο μέρος του διαδικτυακού μάρκετινγκ: πολλοί επαγγελματίες προώθησης στο Διαδίκτυο συχνά χρησιμοποιούν βίντεο σε συνδυασμό με "viral marketing" για να αυξήσουν την επισκεψιμότητα.Εάν το μάρκετινγκ WeChat συνδυαστεί με το μάρκετινγκ βίντεο, μπορεί να βελτιώσει περαιτέρω το ποσοστό μετατροπής copywriting των νέων μέσων και του κοινωνικού ηλεκτρονικού εμπορίου.Εχω πολλούς φίλους...