تغییر اندازه تصاویر با 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 مقدار ویژگی باید یک شی جاوا اسکریپت با جفت های کلید-مقدار باشد:

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 به جای تنظیم ویژگی‌های ثابت برای این تصاویر، ترجیح داده می‌شود، مگر اینکه زمانی که می‌خواهید این مقادیر را به صورت پویا دریافت کنید، کاملاً ضروری است، در این صورت می‌توان از استایل درون خطی نیز استفاده کرد.