Συμπιεσμένη εικόνα στη στήλη

Γεια σας,

νομίζω ότι δεν είναι φυσιολογικό επειδή οι στήλες αλλάζουν μέγεθος ανάλογα με το μέγεθος της οθόνης. Συνήθως σε ένα responsive πρότυπο εφαρμόζεται μια ιδιότητα max-width: 100% σε όλες τις εικόνες για να γίνουν responsive. Αν δεν την έχετε, οι εικόνες έχουν σταθερό μέγεθος, δεν θα λειτουργήσει σε μικρή οθόνη.

Δείτε το συνημμένο τι συμβαίνει συνήθως με 3 στήλες.

Χαιρετισμούς,

Αν και έχει περάσει πολύς καιρός από τότε που λύθηκε το πρόβλημα του TO, πρέπει να το προωθήσω επειδή έχω το ίδιο πρόβλημα. Και έχω ανακαλύψει την αιτία αυτής της συμπεριφοράς: Συμβαίνει αν αλλάξετε το μέγεθος των εικόνων και αλλάξετε οποιαδήποτε παράμετρο της εικόνας στο παράθυρο διαλόγου ιδιοτήτων εικόνας (ή μήπως ονομάζεται ιδιότητα εικόνας; Δεν χρησιμοποιώ την αγγλική έκδοση).
Ένα παράδειγμα: Έβαλα μια εικόνα στο άρθρο μου και την άλλαξα σε μέγεθος σύροντάς την με το ποντίκι στα 400x300px. Στον πηγαίο κώδικα υπάρχει
το width="400" hight="300".
Τώρα κάντε διπλό κλικ στην εικόνα για να ξεκινήσετε το παράθυρο διαλόγου ιδιοτήτων εικόνας και απλώς κάντε κλικ στο OK. Τώρα ο πηγαίος κώδικας άλλαξε σε
img style="width:400px; hight:300px;"
Είναι απλώς ένας άλλος τρόπος για να βάλετε την παράμετρο μεγέθους σε HTML, αλλά ο τρόπος style="... κάνει τις εικόνες για κάποιο λόγο να συμπιέζονται κατά την αλλαγή μεγέθους του παραθύρου του προγράμματος περιήγησης.

Υπάρχει τρόπος να αλλάξω τον κώδικα;

Γεια σας,

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

Χαιρετισμούς,

Ευχαριστώ Tristan για την απάντηση, φυσικά και μπορώ να κάνω μερικά στιγμιότυπα οθόνης.

Έφτιαξα ένα απλό παράδειγμα με μια εικόνα που έχει το αρχικό μέγεθος 800x535px.

1. Άλλαξα το μέγεθός της χρησιμοποιώντας τις λαβές απευθείας στον επεξεργαστή drop (παρεμπιπτόντως, δεν υπάρχει τίποτα κακό στο να το κάνετε έτσι, αρκεί να παραμένετε αναλογικοί). Κλείδωσα στο συρρικνωμένο παράθυρο του προγράμματος περιήγησης, η εικόνα έχει τη σωστή αναλογία και είναι πλήρως responsive. [resized_in_dropedit_by_handles.png]

2. Στη συνέχεια, έκανα διπλό κλικ στην εικόνα για να ανοίξω το παράθυρο διαλόγου ιδιοτήτων, δεν άλλαξα τίποτα - μόνο έκανα κλικ στο 'OK'. Ο πηγαίος κώδικας άλλαξε όπως μπορείτε να δείτε και η ίδια εικόνα στο ίδιο συρρικνωμένο παράθυρο του προγράμματος περιήγησης εμφανίζεται συμπιεσμένη και δεν ανταποκρίνεται πλέον. [resized_by_properties-dialog.png]

Ελπίζω ότι αυτό θα κάνει το πρόβλημα πιο σαφές και θα βοηθήσει στη DropEditor (νομίζω ότι το DE είναι ο πιο έξυπνος επεξεργαστής Joomla).

Παρεμπιπτόντως, αυτό είναι ένα άλλο σημείο, αλλά, θα ήταν δυνατόν να έχουμε ένα πεδίο κλάσης εικόνας στο παράθυρο διαλόγου ιδιοτήτων των εικόνων; Αυτό θα έκανε τις αλλαγές κλάσης λίγο πιο άνετες.

Με εκτίμηση, Φρανκ

Γεια σας,


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

Όσον αφορά την πρώτη σκέψη σχετικά με το φυσικό μέγεθος της εικόνας, δεν αλλάζει το πρόβλημα, είναι απλώς μια συμβουλή. Επιβραδύνει τον ιστότοπό σας και ανιχνεύεται από όλες τις αναλύσεις εργαλείων SEO ως σφάλμα. Στο Chrome, το εργαλείο λαβών έχει αφαιρεθεί από τον επεξεργαστή.

Χαιρετισμούς,

Εντάξει, αυτή θα ήταν μια εξαιρετική ενημέρωση.

Συνήθιζα να το κάνω αυτό χειροκίνητα με droppics (pro) δημιουργώντας ένα αντίγραφο προσαρμοσμένου μεγέθους. Μια αυτόματα δημιουργημένη μικρογραφία θα ήταν πιο άνετη - πολύ ευπρόσδεκτη. Το πρόβλημά μου με αυτό είναι ότι οι εικόνες που τοποθετούνται σε άρθρα με το μέγιστο μέγεθός τους φαίνονται λίγο θολές σε οθόνες υψηλής ανάλυσης. Για παράδειγμα, μια εικόνα 400x300px που τοποθετείται σε ένα άρθρο φαίνεται εντάξει στην οθόνη του γραφείου μου με 72 dpi, σε ένα tablet με <200dpi φαίνεται θολή (προκαλείται από την αλλαγή μεγέθους του προγράμματος περιήγησης). Μια εικόνα με φυσικές διαστάσεις 600x448px που έχει αλλάξει μέγεθος σε 400x300px φαίνεται πολύ πιο ευκρινής σε οθόνες HiRes. Τα μεγέθη αρχείων είναι λίγο μεγαλύτερα - ναι, αλλά όχι τόσο πολύ... Για οθόνες HiRes δεν γνωρίζω άλλον τρόπο για να κάνω τις εικόνες να φαίνονται ευκρινείς.

Με εκτίμηση, Frank

Εντάξει, αυτή θα ήταν μια εξαιρετική ενημέρωση.

Συνήθιζα να το κάνω αυτό χειροκίνητα με droppics (pro) δημιουργώντας ένα αντίγραφο προσαρμοσμένου μεγέθους. Μια αυτόματα δημιουργούμενη μικρογραφία θα ήταν πιο άνετη - πολύ ευπρόσδεκτη. Το πρόβλημά μου με αυτό είναι ότι οι εικόνες που τοποθετούνται σε άρθρα με το μέγιστο μέγεθός τους φαίνονται λίγο θολές σε οθόνες υψηλής ανάλυσης. Για παράδειγμα, μια εικόνα 400x300px που τοποθετείται σε ένα άρθρο φαίνεται εντάξει στην οθόνη του γραφείου μου με 72 dpi, σε ένα tablet με 200dpi φαίνεται άσχημη (προκαλείται από την αλλαγή μεγέθους του προγράμματος περιήγησης). Μια εικόνα με φυσικές διαστάσεις 600x448px που έχει αλλάξει μέγεθος σε 400x300px φαίνεται πολύ πιο ευκρινής σε οθόνες HiRes. Τα μεγέθη αρχείων είναι λίγο μεγαλύτερα - ναι, αλλά όχι τόσο πολύ... Για οθόνες HiRes δεν γνωρίζω άλλον τρόπο για να κάνω τις εικόνες να φαίνονται ευκρινείς.

Με εκτίμηση, Frank

Υ.Γ. Συγγνώμη που το δημοσίευσα ξανά, το σύστημα έκοψε το κείμενό μου λόγω χρήσης ενός βέλους-συμβόλου. Θα είμαι πιο προσεκτικός στα επόμενα μηνύματά μου.