تغيير حجم الصور باستخدام 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 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;.

تصميم صورنا

عندما نستخدم height, width, max-height، وخصائص CSS الأخرى لتغيير حجم صورنا ، فإنها تميل إلى تشويهها ، مما يجعلها تتقلص أو تمتد.

من الجيد دائمًا تضمين ملف object-fit الخاصية ، التي تحدد كيفية تغيير حجم الصورة لتلائم حاويتها. يمكن أن تقبل هذه الخاصية مجموعة متنوعة من القيم مثل contain, cover, fill, none و scale-down.

خصائص CSS الأخرى ، مثل max-width, min-width, max-heightو min-height، يمكنه تحديد القيم القصوى والدنيا التي يمكن للصورة الوصول إليها ، مما يحد من التشويه.

وفي الختام

في هذه المقالة ، تعلمنا كيفية تغيير حجم الصور في React من خلال النظر في الخيارات المختلفة المتاحة لنا.

ومع ذلك ، يُفضل استخدام أنماط CSS بدلاً من الاضطرار إلى تعيين سمات ثابتة لهذه الصور ما لم يكن ضروريًا للغاية عندما تريد تلقي هذه القيم ديناميكيًا ، وفي هذه الحالة يمكن أيضًا استخدام التصميم الداخلي.