از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
تغییر اندازه تصاویر با React: داشتن تصاویر بصری همیشه ایده خوبی است روی یک وب سایت یا برنامه وب، زیرا آنها به جذب کاربر کمک می کنند، اما زمانی که این تصاویر به قدری بزرگ هستند که کاربر مجبور به پیمایش در آنها می شود، کل آن را مخدوش می کند. page، به نتیجه معکوس می رسد. در این مقاله می آموزیم که چگونه …
سرفصلهای مطلب
معرفی
داشتن تصاویر بصری همیشه ایده خوبی است روی یک وب سایت یا برنامه وب، زیرا آنها به جذب کاربر کمک می کنند، اما زمانی که این تصاویر به قدری بزرگ هستند که کاربر مجبور به پیمایش در آنها می شود، کل آن را مخدوش می کند. page، به نتیجه معکوس می رسد.
در این مقاله، روش تغییر اندازه تصاویر با 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="" />
<!-- OR -->
<img src={Logo} width={500} height={600} alt="" />
</div>
);
};
اشکال اصلی این روش این است که دستکاری در ارتفاع و عرض تصاویر را مخدوش می کند، آنها را کوچک می کند، کشیده می شود یا نسبت خود را از دست می دهد. این می تواند با استفاده از آن برطرف شود object-fit: cover;.
شکل دادن به تصاویر ما
وقتی از height، width، max-heightو سایر ویژگی‌های CSS برای تغییر اندازه تصاویر ما، تمایل به تحریف آنها دارند و باعث کوچک شدن یا کشیده شدن آنها می‌شوند.
همیشه ایده خوبی است که شامل آن شوید object-fit ویژگی، که مشخص می کند چگونه یک تصویر باید اندازه آن را تغییر دهد تا متناسب با آن باشد container. این ویژگی می تواند مقادیر مختلفی از جمله contain، cover، fill، none و scale-down.
سایر خصوصیات CSS ، مانند max-width، min-width، max-height، و min-height، می تواند حداکثر و حداقل مقادیری را که یک تصویر می تواند وارد کند را تعیین کند و اعوجاج را محدود کند.
نتیجه
در این مقاله روش تغییر اندازه تصاویر در React را با نگاهی به گزینه های مختلف در دسترس یاد گرفتیم.
با این حال، ترجیحاً استفاده از استایل‌های CSS به جای تنظیم ویژگی‌های ثابت برای این تصاویر، ترجیح داده می‌شود، مگر اینکه زمانی که می‌خواهید این مقادیر را به صورت پویا دریافت کنید، کاملاً ضروری است، در این صورت می‌توان از استایل درون خطی نیز استفاده کرد.
منتشر شده در 1403-01-07 13:24:03
