การปรับขนาดรูปภาพด้วย 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 ในฐานะผู้เลือก เราสามารถตัดสินใจให้ a 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 มากกว่าที่จะต้องตั้งค่าแอตทริบิวต์คงที่ให้กับรูปภาพเหล่านี้ เว้นแต่จำเป็นจริงๆ เมื่อคุณต้องการรับค่าเหล่านี้แบบไดนามิก ในกรณีนี้ คุณสามารถใช้สไตล์อินไลน์ได้