ερώτηση CSS για div με overflow & img.

[pbp]

Γεια σας,

Έστω ότι έχω φτιάξει ένα div με overflow:auto; και μέσα σε αυτο τοποθετώ μια πολύ μεγαλύτερη εικόνα απο αυτό.

Πως θα μπορέσω να ελέγξω με το που φορτώνω την σελίδα μου να φαίνεται μέσα στο div το κομμάτι της εικόνας που θέλω εγώ και όχι η πάνω αριστερή της γωνία (προεπιλεγμένη επιλογή)

ΠΡΟΣΟΧΗ!

Δεν έχω κάνει background-image αλλά img.

Ευχαριστώ!

[cyclo]

αν αναφέρεσαι σε tabulare html programming η λύση είναι vertical-align="middle"

 

αλλα επειδή μάλλον γράφεις tabless, τότε δίνεις βάζεις έναν ακόμα image-container, του δίνεις margin απ τον μεγαλύτερο container και στη συνέχεια κάνεις την εικόνα html fit to height η fit to width.

[defacer]

Δίνεις στο div σου position: relative και στο img position: absolute. Απο κει και πέρα μπορείς παίζοντας με τo top/left (ή bottom/right, όπως σε βολεύει) του img να το τοποθετήσεις όπως θέλεις.

 

Προσοχή στο ότι μετά από αυτό το img θα βγει από το layout του div και το μέγεθός του δε θα λαμβάνεται υπόψη για να υπολογιστεί το απαιτούμενο μέγεθος του div (δηλαδή αν το div δεν έχει κάτι άλλο μέσα θα αποκτήσει μηδενικό μέγεθος, οπότε δε θα φαίνεται τίποτα). Αυτό μπορείς να το αντιμετωπίσεις δίνοντας συγκεκριμένες διαστάσεις στο div με height και width.

 

BTW όπως τ' ακούω νομίζω πως θα έπρεπε να είναι overflow: hidden, όχι auto.

 

JSFiddle.

[pbp]

Δίνεις στο div σου position: relative και στο img position: absolute. Απο κει και πέρα μπορείς παίζοντας με τo top/left (ή bottom/right, όπως σε βολεύει) του img να το τοποθετήσεις όπως θέλεις.

 

Προσοχή στο ότι μετά από αυτό το img θα βγει από το layout του div και το μέγεθός του δε θα λαμβάνεται υπόψη για να υπολογιστεί το απαιτούμενο μέγεθος του div (δηλαδή αν το div δεν έχει κάτι άλλο μέσα θα αποκτήσει μηδενικό μέγεθος, οπότε δε θα φαίνεται τίποτα). Αυτό μπορείς να το αντιμετωπίσεις δίνοντας συγκεκριμένες διαστάσεις στο div με height και width.

 

BTW όπως τ' ακούω νομίζω πως θα έπρεπε να είναι overflow: hidden, όχι auto.

 

JSFiddle.

 

Μα δεν θέλω να φαίνεται μόνο το κομμάτι που θα κεντράρω αλλά όλη η εικόνα με scroll.

Απλά θέλω ένα συγκεκριμένο σημείο της εικόνας ως αφετηρία και από κει με scroll ο χρήστης να πηγαίνει όπου θέλει και να βλέπει όποιο σημείο θέλει.

Για να μπείς στο νόημα, η εικόνα είναι ένας μεγάλος χάρτης ενώ το div είναι αρκετά μικρότερο του χάρτη

[parsifal]

Νομίζω πως δε γίνεται με CSS αυτό που ζητάς. Θα πρέπει να πας σε Javascript λύση.

 

http://api.jquery.com/scrollTop/

http://api.jquery.com/scrollLeft/

 

 

Υπάρχουν και έτοιμες, elegant λύσεις, δες π.χ. εδώ ένα σχετικό jQuery plugin: http://www.azoffdesign.com/overscroll

[cyclo]

αν θέλεις την εικαστική μου άποψη...

μικρογραφία του χάρτη,

στο hover ενα effect να φαίνεται οτι είναι clickable..

 

και στο click... να μεγενθύνεται.

 

προσωπικά το scrollable div και το overflow auto δεν το χρησιμοποιώ ποτέ γιατί δεν μου αρέσει:Ρ

 

ξαναλέω...

αν θέλεις την εικαστική μου άποψη...

[defacer]

Μα δεν θέλω να φαίνεται μόνο το κομμάτι που θα κεντράρω αλλά όλη η εικόνα με scroll.

Απλά θέλω ένα συγκεκριμένο σημείο της εικόνας ως αφετηρία και από κει με scroll ο χρήστης να πηγαίνει όπου θέλει και να βλέπει όποιο σημείο θέλει.

Για να μπείς στο νόημα, η εικόνα είναι ένας μεγάλος χάρτης ενώ το div είναι αρκετά μικρότερο του χάρτη

 

Τότε δες τις προτάσεις του parsifal. Επίσης κάνε τον κόπο να ξαναδιαβάσεις το αρχικό σου post, από το οποίο δε βγαίνει με τίποτα σα νόημα αυτό που περιγράφεις εδώ. Αν δε μπορούμε να καταλάβουμε τι θέλεις, δε μπορούμε και να βοηθήσουμε.

[v5net]

@pbp

 

η έτοιμη jquery λυση που υπέδειξε ο parsifal νομίζω είναι αυτό που θέλεις, πολύ ωραίο και εύκολο, μου άρεσε και το έβαλα κάπου

δες το πως δουλεύει με χάρτη όπως θελεις εσύ εδώ