thumbnails με διαφορετικό ύψος

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

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

Απάντηση
Άβαταρ μέλους
geoki
Δημοσιεύσεις: 309
Εγγραφή: 07 Ιαν 2002 01:00
Τοποθεσία: Giannitsa

thumbnails με διαφορετικό ύψος

Δημοσίευση από geoki » 13 Οκτ 2011 23:27

Προσπαθώ να κάνω μια gallery με εικόνες με τον παρακάτω κώδικα
CSS
<style type="text/css">
#photos-border
{
float: left;
background: #DEE2E2;
border: 1px solid #8B9897;
padding: 6px;
margin:5px;
}
</style>
HTML
<div id="photos-border">
<img alt="" src="/pics/pic1.jpg" style="width: 105px; height: 105px;" />
</div>
Όταν όμως κάποια εικόνα έχει διαφορετικό ύψος χαλάει η στοίχιση. Τι να προσθέσω στο css για να μη συμβαίνει αυτό?
Συνημμένα
2.jpg
1.jpg

Άβαταρ μέλους
_tasos
Δημοσιεύσεις: 116
Εγγραφή: 03 Μάιος 2007 15:06
Επικοινωνία:

thumbnails με διαφορετικό ύψος

Δημοσίευση από _tasos » 14 Οκτ 2011 01:05

Μπορείς να ορίσεις width και height για το image (όπως το ορίζεις και στο HTML) και έτσι όλες οι εικόνες θα έχουν τις ίδιες διαστάσεις.

Αν όμως είναι εικόνες με διαφορετική αναλογία διαστάσεων (η μία είναι 100x100 και η άλλη είναι 120x90) θα έχεις streched τις εικόνες. Αυτό προσπαθείς να αποφύγεις;

Άβαταρ μέλους
geoki
Δημοσιεύσεις: 309
Εγγραφή: 07 Ιαν 2002 01:00
Τοποθεσία: Giannitsa

thumbnails με διαφορετικό ύψος

Δημοσίευση από geoki » 14 Οκτ 2011 01:07

Ναι ακριβώς

Άβαταρ μέλους
_tasos
Δημοσιεύσεις: 116
Εγγραφή: 03 Μάιος 2007 15:06
Επικοινωνία:

thumbnails με διαφορετικό ύψος

Δημοσίευση από _tasos » 14 Οκτ 2011 01:29

Δοκίμασε αντί για width και height να ορίσεις max-width και max-height. Μετά να βάλεις τις εικόνες μέσα σε ένα div, π.χ.

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

<div class="image_wrapper"><img src="image.jpg" alt="" /></div>
και να δώσεις σε αυτό σαν width και height τις τιμές που έδωσες στα max-width και max-height.

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

 
.image_wrapper
&#123;
float&#58; left;
display&#58;inline-block;
width&#58;100px; 
height&#58;100px;
&#125; 

.image_wrapper img
&#123;
max-width&#58;100px; 
max-height&#58;100px;
&#125; 
Δεν το δοκίμασα τα παραπάνω css, μπορεί να μου ξέφυγε κάτι.

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 411
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

thumbnails με διαφορετικό ύψος

Δημοσίευση από apsuh0s » 14 Οκτ 2011 01:33

http://masonry.desandro.com/demos/images.html δες μήπως σε βολεύει κάτι τέτοιο σε jquery

edit:

α! δεν έχεις πρόβλημα να γίνεται crop;
Τελευταία επεξεργασία από το μέλος apsuh0s την 14 Οκτ 2011 01:41, έχει επεξεργασθεί 1 φορά συνολικά.
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
geoki
Δημοσιεύσεις: 309
Εγγραφή: 07 Ιαν 2002 01:00
Τοποθεσία: Giannitsa

thumbnails με διαφορετικό ύψος

Δημοσίευση από geoki » 14 Οκτ 2011 01:40

Μπραβο Τασο
Ευχαριστώ

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

thumbnails με διαφορετικό ύψος

Δημοσίευση από korgr » 14 Οκτ 2011 10:22

Δες αν σε βοηθούν καθόλου κι αυτές οι προσεγγίσεις:

http://www.freestuff.gr/forums/viewtopic.php?t=58288
http://www.freestuff.gr/forums/viewtopic.php?t=47863


Απάντηση

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

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

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