Πρόβλημα με ύψος εικόνας

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

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

Απάντηση
Άβαταρ μέλους
dj_kostas_pro
Δημοσιεύσεις: 210
Εγγραφή: 10 Οκτ 2007 16:54
Τοποθεσία: Πιερία

Πρόβλημα με ύψος εικόνας

Δημοσίευση από dj_kostas_pro » 17 Ιαν 2015 09:10

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

Έχω το post-website-img το οποίο του έχω ορίσει κανονικά το πλάτος κτλ. και του λέω τις εικόνες που έχεις μέσα να έχουν 50% πλάτος και αυτόματο ύψος ανάλογα με την εικόνα...

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

.post-website-img {
	float:left;
	width:50%;
	height:auto;
}
.post-website-img img {
	float:left;
	width:50%;
	height:auto;
}
Όλα καλά μέχρι εδώ, το πρόβλημα είναι επειδή η κάθε εικόνα έχει διαφορετικό ύψος αντί να πάει και να τις κολλήσει την μία κάτω από την άλλη μου τις εμφανίζει έτσι.

Εικόνα

ΤΙ ΣΤΟ ΚΑΛΟ ΠΡΟΚΑΛΕΙ ΤΑ ΚΕΝΑ!!! :evil:
Όλοι ζούμε κάτω από τον ίδιο ουρανό, αλλά δεν έχουμε όλοι τον ίδιο ορίζοντα.

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

Πρόβλημα με ύψος εικόνας

Δημοσίευση από giannis17 » 17 Ιαν 2015 12:33

αχαχαχ, λοιπόν του λες να κάνει την εικόνα στο μισό width και το ύψος να το ορίζει αυτόματα και αυτό κάνει! Απλά κρατάει την αναλογία της εικόνας!

Για να δουλέψει όπως θες είτε πρέπει να κάνεις edit όλες τις εικόνες για να γίνουν στο ratio που χρειάζεται ή να τις κάνεις crop στο css (απλά θέλει δοκιμές και σίγουρα δεν θα φαίνονται όλες σωστά από την άποψη οτι μερικές θα τις κόβει πολύ).

Sample code για το crop:

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

.post-website-img {
    width: 200px;
    height: 150px;
    overflow: hidden;
	float:left;
}

.post-website-img img {
    width: 50%;
    height: auto;
	min-width: 300px;
	min-height: 250px;
    margin: -75px 0 0 -100px;
}
παίξε με τις τιμές στο margin για να μετακινήσεις τις εικόνες μέσα στο πλαίσιο και να διορθώσεις το crop.
"There is only one problem with common sense; it’s not very common."
– Milt Bryce

Άβαταρ μέλους
dj_kostas_pro
Δημοσιεύσεις: 210
Εγγραφή: 10 Οκτ 2007 16:54
Τοποθεσία: Πιερία

Πρόβλημα με ύψος εικόνας

Δημοσίευση από dj_kostas_pro » 17 Ιαν 2015 13:29

ευχαριστώ για την ανταπόκριση...

Εάν κάνω αυτό που μου προτείνεις θα χάσω την ελαστικότητα. Η ιστοσελίδα που φτιάχνω έχει ρευστά πλάτη οπότε θα πρέπει να βρω τι στο καλό φταίει...
Όλοι ζούμε κάτω από τον ίδιο ουρανό, αλλά δεν έχουμε όλοι τον ίδιο ορίζοντα.

Απάντηση

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

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

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