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