image resize to fit in div

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
IzMbit
Δημοσιεύσεις: 72
Εγγραφή: 17 Ιαν 2009 16:23

image resize to fit in div

Δημοσίευση από IzMbit » 04 Δεκ 2011 21:52

Γειά σας, καλώ μια φωτογραφία με php απο τη βάση μου.. την βάζω σε ένα div βάζω auto το width και το height αλλά χαλάει η φωτό και το δεν γινεται σωστό scale :/

μπορώ με css να κάνω resize φωτογραφίες να κάνουν fit σε 300x300 ?
μπορώ να αποφύγω να χαλάει/τραβιέτε η φωτό? πχ αν width>height ή height>width? :/

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

image resize to fit in div

Δημοσίευση από korgr » 04 Δεκ 2011 22:17

Αν θες να την κάνεις resize σε 300Χ300 (τετράγωνο) και το aspect ratio της εικόνας δεν είναι 1:1, τότε ή θα την παραμορφώσεις ή θα χάσεις κάποιο θέμα εκμεταλλευόμενος το overflow:hidden πάνω στο div

IzMbit
Δημοσιεύσεις: 72
Εγγραφή: 17 Ιαν 2009 16:23

image resize to fit in div

Δημοσίευση από IzMbit » 05 Δεκ 2011 08:56

korgr έγραψε:Αν θες να την κάνεις resize σε 300Χ300 (τετράγωνο) και το aspect ratio της εικόνας δεν είναι 1:1, τότε ή θα την παραμορφώσεις ή θα χάσεις κάποιο θέμα εκμεταλλευόμενος το overflow:hidden πάνω στο div
Με το overflow:hidden , το θέμα της φωτογραφίες που ξεπερνάει τα 300χ300 δεν θα εμφανίζεται σωστά? δεν εξυπηρετεί ..

Γίνεται η φωτογραφία να κάνει resize μέχρις ότου η μεγαλύτερη πλευρά(πχ το height) της να γίνει 300?(έτσι ώστε η μικρότερη(width) να χωράει και να μην χάνουμε θέμα?

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

image resize to fit in div

Δημοσίευση από korgr » 05 Δεκ 2011 11:30

IzMbit έγραψε:
Γίνεται η φωτογραφία να κάνει resize μέχρις ότου η μεγαλύτερη πλευρά(πχ το height) της να γίνει 300?(έτσι ώστε η μικρότερη(width) να χωράει και να μην χάνουμε θέμα?
Βεβαίως και γίνεται αλλά έτσι καταλήγουμε πως η τελική διάσταση δεν θα είναι 300Χ300 όπως είπες.

Κώδικας: Επιλογή όλων

$image = "myImage.jpg"; // υποτιθέμενο image
$maxWidth = 300; // όσο το θέλεις το πλάτος maximum
list($originalWidth, $originalHeight) = GetImageSize($image );

$percent=100*($maxWidth /$originalWidth);
$percent = ($percent > 100) ? 100 : $percent;
$newHeight=floor($originalHeight*($percent/100));
Η $newHeight θα περιέχει το κατάλληλο ύψος ώστε να μην παραμορφωθεί το image όταν θα έχει πλάτος 300

IzMbit
Δημοσιεύσεις: 72
Εγγραφή: 17 Ιαν 2009 16:23

image resize to fit in div

Δημοσίευση από IzMbit » 05 Δεκ 2011 11:40

korgr έγραψε:
IzMbit έγραψε:
Γίνεται η φωτογραφία να κάνει resize μέχρις ότου η μεγαλύτερη πλευρά(πχ το height) της να γίνει 300?(έτσι ώστε η μικρότερη(width) να χωράει και να μην χάνουμε θέμα?
Βεβαίως και γίνεται αλλά έτσι καταλήγουμε πως η τελική διάσταση δεν θα είναι 300Χ300 όπως είπες.

Κώδικας: Επιλογή όλων

$image = "myImage.jpg"; // υποτιθέμενο image
$maxWidth = 300; // όσο το θέλεις το πλάτος maximum
list($originalWidth, $originalHeight) = GetImageSize($image );

$percent=100*($maxWidth /$originalWidth);
$percent = ($percent > 100) ? 100 : $percent;
$newHeight=floor($originalHeight*($percent/100));
Η $newHeight θα περιέχει το κατάλληλο ύψος ώστε να μην παραμορφωθεί το image όταν θα έχει πλάτος 300
:victory: :victory: :victory: ευχαριστώ!

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

image resize to fit in div

Δημοσίευση από Basilakis » 05 Δεκ 2011 13:00

θα μπορούσες να κάνεις και ένα

max-width
max-height

εάν δεν έχεις θέμα με το resize

IzMbit
Δημοσιεύσεις: 72
Εγγραφή: 17 Ιαν 2009 16:23

image resize to fit in div

Δημοσίευση από IzMbit » 13 Δεκ 2011 16:49

αν θέλουμε το ιmage να κάνει resize ανάλογα με το μέγεθος του παραθύρου ή του div που βρίσκεται μέσα?

πχ εχω 2ιmages ένα 600χ600 και ένα 100χ50 , δηλώνω width:100% και max-width:340px. με το width 100% το 1ο image θα κάνει scale ανάλογα το παράθυρο.. αλλά το 2ο θα χαλάσει και θα τραβιχτεί ως 340px :/ καμία ιδέα πως να το αποφύγουμε?

ακόμη έχετε δει τις φωτογραφίες σε ένα προϊόν στο amazon? κάνουν resize ανάλογα με το width του παραθύρου + αλλάζει το width="" + το height δυναμικά. πρέπει να είναι javascript σωστά? γνωρίζομε πως μπορούμε να κάνουμε κάτι ανάλογο??

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες