Εικόνα background να φαίνεται πάντα ολόκληρη

[killer76]

Καλησπέρα. Στο site μου (custom) ανεβάζω εικόνες που παίζουν το ρόλο του header. οι εικόνες αυτές είναι σταθερές 1000x450.

εκεί που θέλω να εμφανίζεται έχω βάλει αυτό το css

    height:450px;
    background-image:url("../site/page-header.jpg");
    background-size:cover;
    background-repeat:no-repeat;

Αλλά θέλω σε οποιαδήποτε οθόνη να φαίνεται όλη η φωτογραφία, χωρίς να γίνεται περικοπή και να διαμορφώνεται αυτόματα το πλάτος και το ύψος. Τώρα ας πούμε στην μεγάλη οθόνη που είμαι μου την εμφανίζει σε διαστάσεις 1900χ450 και μου κόβει απο πάνω και αποκάτω. Δοκίμασα να βάλω και το height σε 100% και μου το κάνει πολύ μικρό το height. δοκίμασα να βάλω και το width:100% και δεν μου την εμφανίζει σε όλο το header. Επίσης όπως είναι τώρα, όσο μικραίνω την οθόνη, τόσο καλύτερα φαίνεται στο ύψος, αλλά δεν φαίνεται στο κέντρο. Τι μπορώ να κάνω?

και 2 ερωτησούλες ακόμα να μην ανοίγω νέο νήμα.

1. Υπάρχει κάποιο πρόγραμμα (σε mac) να το αγοράσω να φτιάχνω τα του design και responsive εκεί κάπως εύκολα?  Ξέρω οτι το καλύτερο είναι να μάθω css  και bootstrap, απλα δεν έχω πολύ χρόνο και προτιμώ να αφοσιωθώ περισσότερο στο developer κομμάτι αντί για το designer.

2. Θέλω να χρησιμοποιήσω την κλαση thumbnail του bootstrap για μια gallery αλλά να έχει σταθερο ύψος και πλάτος η κάθε φώτο, χωρίς να την αλλοιώνει όμως, όποια και αν είναι η αρχική της διάσταση. Δηλαδή για μια φώτο πχ 400χ600 μέσα στο thumbnail πχ 300χ300 να φαίνεται το κέντρο της φωτογραφίας και αν την ανοίξει κάποιος, τότε να ανοίγει όλόκληρη η εικόνα. Είπα να φτιάχνω 2 version που να αποθηκεύονται όταν ανεβάζω στο site (όπως το wordpress), για παράδειγμα image1.jpg η πρωτότυπη και  image1_300_x_300.jpg αυτή που θα εμφανίζω στο thumbnail. Αλλά πρωτιμώ αν γίνεται να έχω μία φώτο.

Επεξ/σία 9 Απριλίου 2019 από killer76

[ajaxmonkey4hire]

Η φωτογραφία είναι 100/45 (πλάτος/ύψος)  η οθόνη μπορεί να είναι 40/30, 80/45, 20/60.....κτλ αν δεν θέλεις να "τσαλακώσεις" την φωτογραφία θα βάλεις το πλάτος στο 100% . Αν βάλεις και πλάτος και ύψος στο 100% αναπόφευκτα θα παραποιηθεί η αναλογία διαστάσεων. 

Επεξ/σία 11 Μαΐου 2019 από ajaxmonkey4hire

[Predatorkill]

Για το 1ο ερωτημα υπαρχουν πολλες λυσεις, Adobe XD, Figma, Zeplin, Invision και φυσικα ο πατερας τους, το Sketch

[trib]

width:100%, height:auto

[killer76]

Παιδιά σας ευχαριστώ πάρα πολύ. Δούλεψε το height:auto.

Στις 12/5/2019 στις 12:40 ΠΜ, Predatorkill είπε

Για το 1ο ερωτημα υπαρχουν πολλες λυσεις, Adobe XD, Figma, Zeplin, Invision και φυσικα ο πατερας τους, το Sketch

Δεν ήξερα οτι υπάρχουν τόσες επιλογές. Θα τα δοκιμάσω όλα......

[Haldol]

10 ώρες πριν, killer76 είπε

Δεν ήξερα οτι υπάρχουν τόσες επιλογές. Θα τα δοκιμάσω όλα......

Ξεκίνα με το Adobe XD, που είναι το μόνο δωρεάν. Εάν δε σε καλύψει δες και τα υπόλοιπα. Εγώ το χρησιμοποιώ φουλ, μ' έχει καταβολέψει.