Αλλαγή μεγέθους εικόνων με το React

Εισαγωγή

Είναι πάντα καλή ιδέα να υπάρχουν γραφικά σε έναν ιστότοπο ή μια εφαρμογή Ιστού, επειδή βοηθούν στην προσέλκυση ενός χρήστη, αλλά όταν αυτές οι εικόνες είναι τόσο μεγάλες που ο χρήστης πρέπει να κάνει κύλιση, παραμορφώνοντας ολόκληρη τη σελίδα, επιτυγχάνεται το αντίθετο αποτέλεσμα.

Σε αυτό το άρθρο, θα μάθουμε πώς να αλλάζουμε το μέγεθος των εικόνων με το React χρησιμοποιώντας διάφορες πιθανές προσεγγίσεις.

Η αλλαγή μεγέθους εικόνων στο React μοιάζει πολύ με την αλλαγή μεγέθους εικόνων στην παραδοσιακή HTML, επειδή χρησιμοποιούμε στυλ CSS (είτε εσωτερικό, ενσωματωμένο ή εξωτερικό στυλ) μέσω className ή η style Χαρακτηριστικό. Μπορούμε επίσης να χρησιμοποιήσουμε το height και width ιδιότητες στο img επισημάνετε απευθείας.

Σημείωση: Στο React, δεν χρησιμοποιούμε class όπως κάνουμε στην HTML, αντ' αυτού, χρησιμοποιούμε className, το οποίο εκτελεί την ίδια λειτουργία με τάξη και δέχεται τιμές συμβολοσειράς.

Ο κώδικας θα μοιάζει γενικά με τις γραμμές:

<!-- index.css -->
img {
   width: 500px;
   height: 600px;
}

Και η εικόνα μας θα μοιάζει με αυτό:

<!-- App.js -->
import Logo from './images/react-logo.png';
import './index.css';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

Σημείωση: συνηθίζαμε img ως επιλογέας, μπορούμε να αποφασίσουμε να του δώσουμε α className και χρησιμοποιήστε το ως επιλογέα.

Πώς να αλλάξετε το μέγεθος μιας εικόνας με ενσωματωμένα στυλ

Χρησιμοποιήσαμε εξωτερικό στυλ στο προηγούμενο παράδειγμα, αλλά όπως και στην παραδοσιακή HTML, μπορούμε να χρησιμοποιήσουμε το style χαρακτηριστικό για να προσθέσετε στυλ CSS. ο style Η τιμή του χαρακτηριστικού πρέπει να είναι ένα αντικείμενο JavaScript με ζεύγη κλειδιών-τιμών:

import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
         <img style={{ width: 500, height: 600 }} src={Logo} alt="React Logo" />
      </div>
   );
};

Από προεπιλογή, η βασική μονάδα είναι σε pixel, αλλά ας υποθέσουμε ότι θέλουμε να χρησιμοποιήσουμε άλλες μονάδες όπως rem, %, vh, κ.λπ. Θα χρησιμοποιήσουμε συμβολοσειρά για την τιμή κλειδιού των στυλ:

import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
         <img style={{ width: "500%", height: "600%" }} src={Logo} alt="React Logo" />
      </div>
   );
};

Εάν έχουμε πολλές εικόνες που χρειάζονται παρόμοιο στυλ και δεν θέλουμε να χρησιμοποιήσουμε εξωτερικό στυλ, θα μπορούσαμε να δημιουργήσουμε ένα αντικείμενο για να κρατήσει αυτά τα αντικείμενα στυλ και στη συνέχεια να προσθέσουμε το αντικείμενο στο styles Χαρακτηριστικό:

import Logo from './images/react-logo.png';

const App = () => {
   const myImageStyle = { width: '500px', height: '600px' };

   return (
      <div>
         <img style={myImageStyle} src={Logo} alt="" />
      </div>
   );
};

Πώς να αλλάξετε το μέγεθος μιας εικόνας με το πλάτος Και ύψος Γνωρίσματα

Στην παραδοσιακή HTML, ένας τρόπος για να αλλάξετε το μέγεθος των εικόνων είναι να χρησιμοποιήσετε το height και width ιδιοκτησία με το img tag και αυτό λειτουργεί επίσης με το React:

import Logo from './images/react-logo.png';
const App = () => {
   return (
      <div>
          <img src={Logo} width="500" height="600" alt="" />
          
          <img src={Logo} width={500} height={600} alt="" />
      </div>
   );
};

Το κύριο μειονέκτημα αυτής της μεθόδου είναι ότι η ενασχόληση με το ύψος και το πλάτος τείνει να παραμορφώνει τις εικόνες, με αποτέλεσμα να συρρικνώνονται, να τεντώνονται ή να χάνουν με άλλο τρόπο την αναλογία τους. Αυτό μπορεί να διορθωθεί χρησιμοποιώντας object-fit: cover;.

Styling των εικόνων μας

Όταν χρησιμοποιούμε το height, width, max-height, και άλλες ιδιότητες CSS για να αλλάξουμε το μέγεθος των εικόνων μας, τείνουν να τις παραμορφώνουν, με αποτέλεσμα να συρρικνώνονται ή να τεντώνονται.

Είναι πάντα καλή ιδέα να συμπεριλάβετε το object-fit ιδιότητα, η οποία καθορίζει πώς πρέπει να αλλάξει το μέγεθος μιας εικόνας ώστε να ταιριάζει στο κοντέινερ της. Αυτή η ιδιότητα μπορεί να δεχθεί μια ποικιλία τιμών όπως π.χ contain, cover, fill, none και scale-down.

Άλλες ιδιότητες CSS, όπως max-width, min-width, max-height, να min-height, μπορεί να ορίσει τις μέγιστες και ελάχιστες τιμές που μπορεί να χτυπήσει μια εικόνα, περιορίζοντας την παραμόρφωση.

Συμπέρασμα

Σε αυτό το άρθρο, μάθαμε πώς να αλλάζουμε το μέγεθος των εικόνων στο React εξετάζοντας τις διάφορες επιλογές που έχουμε στη διάθεσή μας.

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