Στρετσαρισμενη εικονα(css)

[CreedChronicles]

Καλημέρα έχω το εξής πρόβλημα με την css στον παρακάτω κώδικα
θέλω την εικόνα σαν hero  το θέμα είναι πως ότι ύψος και να έχει πιάνει ολόκληρη την σελίδα.
Με το printscreen είδα ότι το ιδανικό ύψος είναι το 700px(ιδανικό για εμένα).
Εαν βάλω εικόνα που έχει 700 ύψος ή κάποια που έχει 1000 πιάνει πολύ μεγαλύτερο υψος από αυτό που θέλω
και εαν βάλω κάποιο πχ height: 700px; ακόμα και 700 να έχει η φωτογραφία μου την δείχνει στρετσαρισμενη.
Που μπορεί να οφείλετε αυτό???
Υγ δεν θέλω η φωτογραφία να μπει σαν background.
 

<div class="page1">
  <div class="img">
    <img src="img/7.jpg" alt="description of image">
  </div>
  <div class="text">
    <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis nisi in quam viverra, nec dignissim tortor venenatis. Nullam eget nulla nec turpis tincidunt semper id eu ipsum. Sed consequat eu sapien a dictum. Integer eget lectus eget nibh pellentesque fringilla in nec dui. Sed facilisis ipsum ut felis euismod congue. Sed ut orci nec dui lacinia vestibulum in in nisl. Etiam eu elit euismod, volutpat quam ac, pharetra massa. Ut euismod ex in velit dapibus facilisis.</p>
  </div>
</div>

αυτή είναι η css μου 

 

.page1{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Μορφοποίηση κειμένου */
.text {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

h1 {
  font-size: 28px;
  text-align: center;
  margin-top: 20px;
}

p {
  font-size: 16px;
  text-align: left;
  margin-top: 20px;
}

/* Μορφοποίηση εικόνας */
.img {
  width: 100%;
  display: flex;
  justify-content: center;
}

.img img {
  width: 100%;
  height: 100%;
  
}

 

Επεξ/σία 20 Ιουλίου 2023 από CreedChronicles

[Xvipes]

Αν κατάλαβα καλά τι θέλεις θα πρέπει να βάλεις max-width:100%; max-height:100%; 
Π.χ https://jsfiddle.net/7eqkah25/23/

[CreedChronicles]

8 λεπτά πριν, Xvipes είπε

Αν κατάλαβα καλά τι θέλεις θα πρέπει να βάλεις max-width:100%; max-height:100%; 
Π.χ https://jsfiddle.net/7eqkah25/23/

ουσιαστικά θέλω να φαίνεται όπως στην εικόνα  2 (στο .img img το height από 100% το έκανα 700* )και όχι στην 1
στην εικόνα 2 το θέμα είναι ότι φαίνεται κάπως παράξενα

* Όσο αφορά αυτό η εικόνα έχει ύψος 1000 όμως και με ύψος 700 συμπεριφέρεται το ίδιο 

[Xvipes]

Βάλε overflow:hidden; και βγάλε το flex στο parent div της εικόνας(.img) και μόνο width:100% στην εικόνα. Το κακό με αυτό είναι πως δεν μπορείς να ελέγξεις απο που θα κόψει την εικόνα, αλλιως θες background image και να παίξεις με το background-position.

https://jsfiddle.net/mgbscwon/9/

[CreedChronicles]

52 λεπτά πριν, Xvipes είπε

Βάλε overflow:hidden; και βγάλε το flex στο parent div της εικόνας(.img) και μόνο width:100% στην εικόνα. Το κακό με αυτό είναι πως δεν μπορείς να ελέγξεις απο που θα κόψει την εικόνα, αλλιως θες background image και να παίξεις με το background-position.

https://jsfiddle.net/mgbscwon/9/

κόβει πάρα πολύ 
με background image πάλι έκοβε πολύ 

.img {
    background-image: url();
    height: 700px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Επεξ/σία 20 Ιουλίου 2023 από CreedChronicles

[Xvipes]

Το ότι θα κόβει είναι λογικό ανάλογα το ratio της εικόνας που θα βάλεις. Ή θα προσέξεις να βάλεις εικόνες που "χωράνε" καλά ή θα συμβιβαστείς με κόψιμο. Δε νομίζω να υπάρχει άλλη λύση εφόσον θες σταθερό ύψος.

[CreedChronicles]

1 λεπτό πριν, Xvipes είπε

Το ότι θα κόβει είναι λογικό ανάλογα το ratio της εικόνας που θα βάλεις. Ή θα προσέξεις να βάλεις εικόνες που "χωράνε" καλά ή θα συμβιβαστείς με κόψιμο. Δε νομίζω να υπάρχει άλλη λύση εφόσον θες σταθερό ύψος.

πως το εννοείς να χωράνε καλά?
Επίσης δεν μπορώ να καταλάβω το εξής είτε 1000px 850px 700px ότι ύψος και να έχει η εικόνα εαν τις έχω 100% ύψος πιάνει ακριβώς το ίδιο γιατί??? 

Επεξ/σία 20 Ιουλίου 2023 από CreedChronicles

[Xvipes]

Από το παράδειγμα που έδωσες( 2 ) κατάλαβα πως θες ένα hero image που θα έχει σταθερό ύψος (700px) και εκεί θα φαίνονται εικόνες.

Με το να λες ότι η εικόνα θα έχει height:100% σημαίνει πως θα πιάσει όλο τον ωφέλιμο χώρο του parent element δλδ θα γίνει 700px. Αν δεν θες να στρετσάρει η εικόνα τότε θα πρέπει από κάπου να κόψει για να κρατηθεί το ratio. Αν σε νοιάζει να πιάνει όλο το ύψος τότε θα κόψει από το πλάτος αν δεν χωράει ολόκληρη.

Δες και το παρακάτω που τα εξηγεί ωραία.
https://www.freecodecamp.org/news/css-responsive-image-tutorial/#:~:text=The max-width property sets,but it can be smaller).&text=Therefore%2C you can define a,to the space of 360px.

[CreedChronicles]

18 ώρες πριν, Xvipes είπε

Από το παράδειγμα που έδωσες( 2 ) κατάλαβα πως θες ένα hero image που θα έχει σταθερό ύψος (700px) και εκεί θα φαίνονται εικόνες.

Με το να λες ότι η εικόνα θα έχει height:100% σημαίνει πως θα πιάσει όλο τον ωφέλιμο χώρο του parent element δλδ θα γίνει 700px. Αν δεν θες να στρετσάρει η εικόνα τότε θα πρέπει από κάπου να κόψει για να κρατηθεί το ratio. Αν σε νοιάζει να πιάνει όλο το ύψος τότε θα κόψει από το πλάτος αν δεν χωράει ολόκληρη.

Δες και το παρακάτω που τα εξηγεί ωραία.
https://www.freecodecamp.org/news/css-responsive-image-tutorial/#:~:text=The max-width property sets,but it can be smaller).&text=Therefore%2C you can define a,to the space of 360px.

Ίσως φταίω και γω που δεν το διευκρίνισα.

Τα 700 px ύψος είναι τυχαίος αριθμός που βρήκα δοκιμάζοντας που θέλω να φαίνεται η εικόνα.

 

Ουσιαστικά θέλω να φαίνεται όπως στην 2 χωρίς να είναι στρετσαρισμενη

[Xvipes]

Τότε μην δώσεις καθόλου ύψος και παίξε μόνο με width:100%

https://jsfiddle.net/t7fczwyx/1/

Απλά έτσι ανάλογα την εικόνα θα έχεις διαφορετικό ύψος κάθε φορά.