שינוי גודל תמונות עם 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>
   );
};

כברירת מחדל, היחידה הבסיסית היא בפיקסלים, אבל נניח שאנחנו רוצים לעשות שימוש ביחידות אחרות כמו 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 תג וזה עובד גם עם 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;.

עיצוב התמונות שלנו

כאשר אנו משתמשים ב height, width, max-height, ומאפייני CSS אחרים כדי לשנות את גודל התמונות שלנו, הם נוטים לעוות אותם ולגרום להם להתכווץ או להימתח.

זה תמיד רעיון טוב לכלול את object-fit מאפיין, המציין כיצד יש לשנות את גודל התמונה כדי להתאים למיכל שלה. נכס זה יכול לקבל מגוון ערכים כגון contain, cover, fill, none ו scale-down.

מאפייני CSS אחרים, כגון max-width, min-width, max-height, ו min-height, יכול להגדיר את הערכים המקסימליים והמינימליים שתמונה יכולה לפגוע, להגביל את העיוות.

סיכום

במאמר זה למדנו כיצד לשנות את גודל התמונות ב-React על ידי התבוננות באפשרויות השונות העומדות לרשותנו.

עם זאת, עדיף להשתמש בסגנונות CSS במקום להגדיר תכונות קבועות לתמונות אלו, אלא אם כן הכרחי לחלוטין כאשר ברצונך לקבל ערכים אלו באופן דינמי, ובמקרה זה ניתן להשתמש גם בעיצוב מוטבע.