Author Topic: image auto height σχετικά επείγον.. (Read 8205 times)

xenios · « **on:** January 24, 2012, 16:44:28 »

Καλησπέρα παιδιά, έχω την ανάγκη να ανεβάσω μια εικόνα οι οποία να παίρνει αυτόματα το μέγιστο ύψος του παραθύρου στο οποίο βρίσκεται χωρίς όμως να παραμορφώνει, πως μπορώ να πετύχω κάτι τέτοιο; Ένα παράδειγμα είναι αυτή η ιστοσελίδα που το κάνει αυτό http://www.parispetridis.com/photo.php?m=c&id=p6&p=p6p1

Ως συνήθως ευχαριστώ εκ των προτέρων οποιονδήποτε θα ασχοληθεί λιγάκι με το φλέγον θέμα μου.. Έχω κολλήσει μέρες τώρα δοκιμάζοντας διάφορα αλλά είναι πάνω από το επίπεδο μου αυτό το ζήτημα.

nikos · « **Reply #1 on:** January 24, 2012, 23:23:31 »

Δεν το καταλαβαίνω όπως το θέτεις και το online παράδειγμα δεν διαφωτίζει. Μια εικόνα αν την ορίσεις να εμφανίζεται στην κορυφή του παραθύρου (margin-top: 0; ) δεν έχει λόγο να παραμορφώσει, παρά μόνο αν την ορίσεις να εμφανίζεται σε συγκεκριμένο πλάτος διαφορετικό (μικρότερο ή μεγαλύτερο) του φυσικού της μεγέθους, ή την "πιέσεις" από την κάτω πλευρά της.

Παράδειγμα επάνω αριστερά: <div style="margin-top: 0;"><img src="picture.jpg"></div>

Παράδειγμα επάνω κέντρο: <div style="text-align: center; margin-top: 0;"><img src="picture.jpg"></div>

xenios · « **Reply #2 on:** January 25, 2012, 06:31:21 »

θέλω να πετύχω ότι ακριβώς κάνει η εικόνα στο on line παράδειγμα! όταν μικραίνει το παράθυρο του browser αυτή συνεχίζει και κρατάει την αναλογία της και μικραίνει...

webgift · « **Reply #3 on:** January 25, 2012, 11:38:39 »

Αν δεις τον κώδικα:
$(window).resize(function(){ $("#photo").height($(window).height() * 80/100); });
Χρησιμοποιείται jQuery τεχνολογία όπου κάνει αυτό που θέλεις. Συγκεκριμένα όταν τρέχει η εκάστωτε σελίδα φορτώνουν στο head tag:

<link rel="stylesheet" type="text/css" href="paris.css"/>
<script type="text/javascript" src="paris.js"></script>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ $("#photo").height($(window).height() * 80/100); });
$(window).resize(function(){ $("#photo").height($(window).height() * 80/100); });
</script>

Οπότε το ορίζει μετά στην συγκεκριμένη εικόνα βάση ID : <img id="photo" src="photos/p6p10.jpg" alt=""/>

Θέλει λίγη δουλίτσα για το κάνεις και εσύ εκεί που θέλεις.

nikos · « **Reply #4 on:** January 25, 2012, 12:08:32 »

Quote from: a_xenias on January 25, 2012, 06:31:21

θέλω να πετύχω ότι ακριβώς κάνει η εικόνα στο on line παράδειγμα! όταν μικραίνει το παράθυρο του browser αυτή συνεχίζει και κρατάει την αναλογία της και μικραίνει...

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

Οπότε πας σε αυτό που σου είπε ο Σταύρος, πράγμα που όντως θέλει δουλειά.

xenios · « **Reply #5 on:** January 26, 2012, 04:34:27 »

παιδιά δοκίμασα πολλά πράγματα, καταρχήν έχω αντιγράψει τον ιστότοπο ολόκληρο για να δω τι γίνεται εκεί μέσα, στη συνέχεια απομόνωσα μια σελίδα και άρχισα να σβήνω τους κώδικες που λέτε για να δω τι γίνεται, εν τέλει, η δουλειά όλη γίνεται μόνο μέσα από το css... Μέσα στον φάκελο υπάρχει μόνο ένα html αρχείο μια φωτογραφία και το css αρχείο. Τίποτε άλλο!! Ούτε jquery ούτε κάτι άλλο.. Συγκεκριμένα από τον κώδικα: #photo { height:100%; min-height:400px; }

nikos · « **Reply #6 on:** January 26, 2012, 12:53:08 »

Δεν ισχύει αυτό που λες, ότι γίνεται μόνο με css και χωρίς javascript και μπορείς να το διαπιστώσεις, πολύ απλά, ως εξής:

Απενεργοποίησε την javascript στο Browser σου και κάνε refresh την σελίδα. Τότε θα δεις ότι η φωτογραφία φορτώνεται στο μέγιστο μέγεθος της και μειώνοντας το ύψος του παραθύρου κρύβεται και δεν κάνει αυτό που έβλεπες.

Συμπέρασμα: To effect επιτυγχάνεται (όπως σου είπε πολύ ορθά ο Σταύρος) με χρήση javascript και JQuery που φορτώνεται στο head καθώς και παρακάτω στο body. Φυσικά φορτώνεται και το απαιτούμενο css, αλλά όχι μόνο αυτό.

webgift · « **Reply #7 on:** January 26, 2012, 13:29:50 »

Όπως λέμε εδώ: Δεν είναι οι άνθρωποι ... Κουζουλοί(=τρελοί) να φορτώνουν ολόκληρη βιβλιοθήκη(jQuery) για να επιτύχουν το αυτόματο ύψος.

xenios · « **Reply #8 on:** January 26, 2012, 15:54:44 »

Δεν θέλει javascript!! Oύτε να φορτώσει παπάδες για να κάνει αυτόματο ύψος την εικόνα. Έφτιαξα μια νέα σελίδα html και πέταξα μέσα την φωτογραφία σκέτη. Είπα απλά να διαβάζει το photo.css.

Ο κώδικας της html σελίδας είναι ο:
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8;"/>
      <title>Test</title>
      <link rel="stylesheet" type="text/css" href="photo.css"/>
   </head>
   <body>
   <img id="photo" src="test.jpg" alt=""/>
</body>
</html>

και ο κώδικας του css είναι ο:
body { margin:0px; background:#fff;}
#photo { height:100%; min-height:400px; }

Δουλεύει εξίσου καλά σε internet explorer, firefox και chrome.
Τι έχετε να πείτε τώρα;

webgift · « **Reply #9 on:** January 26, 2012, 17:12:47 »

Άνοιξε το html tags παραπάνω.

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

xenios · « **Reply #10 on:** January 26, 2012, 17:14:47 »

Σε πιστεύω... την ξέρω την λειτουργία αυτή που έχει ο κάθε browser φυσικά... και φυσικά γίνεται ακριβώς το ίδιο στο παράδειγμα που σας έδειξα και έχω το επιθυμητό αποτέλεσμα και σε αυτό που ζητάω... Το θέμα είναι φυσικά ότι αυτό που μου έστειλες τώρα μικραίνει επ αόριστον εγώ αυτό που σας έδειξα έχει περιορισμό τα 400 Pixel, αυτό το πετυχαίνω μέσω css... Επίσης δεν είναι μια εικόνα ανοιγμένη σκέτη στον browser που σημαίνει ότι μπορώ να βάλω και το μενού μου αριστερά όπως το θέλω και περιγραφή. Είναι μια ολοκληρωμένη html...

Δεν θέλω να ανεβάσω σκέτες jpg για κανένα λόγο. ΠΑΙΔΙΑ ΝΑ ΤΟΝΙΣΩ ΟΤΙ ΕΠΕΙΔΗ ΕΙΜΑΙ ΠΟΛΥ ΑΓΧΩΜΕΝΟΣ ΑΥΤΗ ΤΗ ΣΤΙΓΜΗ ΓΙΑΤΙ ΚΑΝΩ 4 ΕΡΓΑΣΙΕΣ ΜΑΖΙ ΜΠΟΡΕΙ ΝΑ ΦΑΙΝΕΤΑΙ ΟΤΙ ΕΧΩ ΚΑΠΟΙΟ "ΥΦΟΣ", ΝΑ ΜΗΝ ΜΕ ΠΑΡΕΞΗΓΗΣΕΙ ΚΑΝΕΙΣ ΔΕΝ ΕΧΩ ΚΑΝΕΝΑ "ΥΦΟΣ" ΑΠΛΑ ΕΙΜΑΙ ΤΡΟΜΕΡΑ ΒΙΑΣΤΙΚΟΣ ΣΤΙΣ ΑΠΑΝΤΗΣΕΙΣ ΜΟΥ! ευχαριστώ !

webgift · « **Reply #11 on:** January 26, 2012, 17:18:56 »

Παίζουν πολλά ρόλο για αυτό και έσβησα αυτό που είχα αρχικά γράψει. Φαντάσου να μπει εικόνα με ύψος μικρότερο ή ίσο του 400px στο ύψος. Καθώς μικραίνει το παράθυρο του πλοηγού η φωτογραφία κόβεται.

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

Όλοι έχουμε δουλείες και εργασίες δεξιά και αριστερά.

Author Topic: image auto height σχετικά επείγον.. (Read 8205 times)

xenios

image auto height σχετικά επείγον..

nikos

Re: image auto height σχετικά επείγον..

xenios

Re: image auto height σχετικά επείγον..

webgift

Re: image auto height σχετικά επείγον..

nikos

Re: image auto height σχετικά επείγον..

xenios

Re: image auto height σχετικά επείγον..

nikos

Re: image auto height σχετικά επείγον..

webgift

Re: image auto height σχετικά επείγον..

xenios

Re: image auto height σχετικά επείγον..

webgift

Re: image auto height σχετικά επείγον..

xenios

Re: image auto height σχετικά επείγον..

webgift

Re: image auto height σχετικά επείγον..