คุณสมบัติ width ใน CSS: คู่มือฉบับสมบูรณ์เกี่ยวกับการกำหนดขนาดเว็บไซต์

เมื่อคุณเริ่มออกแบบเว็บเพจ คำถามแรกๆ ที่เกิดขึ้นคือ จะควบคุมสิ่งต่างๆ ได้อย่างไร พฤติกรรมด้านขนาดและความกว้างขององค์ประกอบต่างๆนี่แหละคือจุดที่อสังหาริมทรัพย์ชื่อดังเข้ามามีบทบาท width จาก CSS พร้อมด้วยเพื่อนร่วมงานของเธอ height, max-width, min-width และบริษัท การเชี่ยวชาญในคุณสมบัติกลุ่มนี้จะสร้างความแตกต่างระหว่างการออกแบบที่แข็งทื่อกับการออกแบบที่ยืดหยุ่นและเป็นมืออาชีพ

แม้ว่าอาจดูเหมือนเป็นเพียงแค่การบอกว่า "มันมีขนาดความกว้างเท่านี้และความสูงเท่านี้" แต่ในความเป็นจริงแล้วมีรายละเอียดปลีกย่อยมากมาย: องค์ประกอบต่างๆ มีปฏิกิริยาต่อเนื้อหาภายในอย่างไรจะเกิดอะไรขึ้นเมื่อพื้นที่ไม่เพียงพอ? คุณจะปรับขนาดภาพอย่างไร? ขีดจำกัดขนาดต่ำสุดและสูงสุดคือเท่าไร? และคุณจะรักษาสัดส่วนภาพโดยไม่ทำให้ภาพบิดเบี้ยวได้อย่างไร? เราจะมาดูกันอย่างละเอียด พร้อมตัวอย่างที่ชัดเจนและภาษาที่เข้าใจง่าย เพื่อให้คุณสามารถนำไปใช้กับโปรเจ็กต์ของคุณได้อย่างราบรื่น

คุณสมบัติ `width` ใน CSS คืออะไร และทำงานอย่างไร?

สถานที่ให้บริการ width มันทำหน้าที่ในการกำหนด ความกว้างของกล่ององค์ประกอบทั้ง divนี่อาจเป็นรูปภาพ ย่อหน้า หรือองค์ประกอบอื่นๆ ที่ยอมรับขนาดได้ ค่านี้สามารถแสดงได้ในหน่วยต่างๆ (เช่น พิกเซลหรือเปอร์เซ็นต์) และกำหนดว่าองค์ประกอบนั้นจะใช้พื้นที่แนวนอนเท่าใดภายในคอนเทนเนอร์หลักของมัน

หากไม่ได้ระบุความกว้างอย่างชัดเจน โดยทั่วไปแล้วจะเป็นองค์ประกอบแบบบล็อก ขยายอัตโนมัติเพื่อเติมเต็มความกว้างที่มีอยู่ทั้งหมด ภายในภาชนะบรรจุ นี่เป็นพฤติกรรมปกติขององค์ประกอบต่างๆ เช่น <div> o <p>ซึ่งโดยปกติจะเติมเต็มทั้งบรรทัด เว้นแต่จะมีการจำกัดความกว้างด้วย CSS

ในทางตรงกันข้าม เมื่อคุณกำหนดค่าให้กับ widthคุณกำลังสร้าง ความกว้างที่เฉพาะเจาะจงหรือสัมพันธ์กับองค์ประกอบหลักตัวอย่างเช่น หากคุณพิมพ์:

div { width: 300px; }

กล่องนั้นจะมีความกว้าง 300 พิกเซล หากคอนเทนเนอร์มีพื้นที่เพียงพอ ถ้าคุณใช้เปอร์เซ็นต์ เช่น width: 50%;องค์ประกอบนั้นจะใช้เวลา ครึ่งหนึ่งของความกว้างขององค์ประกอบคอนเทนเนอร์ปรับตัวเมื่อขนาดของภาชนะเปลี่ยนแปลง

สิ่งสำคัญที่ควรจำไว้คือ เมื่อคุณกำหนดความกว้างคงที่ คุณกำลังบอกเบราว์เซอร์ว่า กล่องต้องมีขนาดตามที่กำหนดไว้แม้ว่าเนื้อหาภายในจะมีขนาดใหญ่กว่าก็ตาม หากเนื้อหาไม่พอดี คุณสมบัติอื่นๆ ก็จะเข้ามามีบทบาท เช่น overflow เพื่อตัดสินใจว่าจะจัดการกับข้อมูลที่ล้นออกมาอย่างไร

ความแตกต่างระหว่างค่าความกว้าง ความสูง และค่าอัตโนมัติ

นอกจากนี้แล้ว widthCSS มีคุณสมบัติดังกล่าว height ควบคุม ความสูงขององค์ประกอบคุณสมบัติทั้งสองยอมรับค่าในหน่วยสัมบูรณ์ (px) หรือหน่วยสัมพัทธ์ (%, em, rem เป็นต้น) แต่พฤติกรรมเริ่มต้นของทั้งสองไม่เหมือนกันเสียทีเดียว

เมื่อองค์ประกอบนั้นไม่มีทั้งค่าที่กำหนดหรือค่าอื่นใด width ni heightเบราว์เซอร์ใช้ค่าโดยนัย auto สำหรับทั้งสองทรัพย์สินหมายความว่าความกว้างและความสูงจะถูกคำนวณโดยอัตโนมัติ โดยอิงจากประเภทขององค์ประกอบและเนื้อหา เบราว์เซอร์จะพยายามเลือกขนาดที่ "เหมาะสม" ตามลำดับการจัดเรียงของเอกสาร

ในทางปฏิบัติ ให้ใช้ width: auto; อนุญาตให้เบราว์เซอร์ ปรับความกว้างให้เหมาะสมกับบริบทโดยธรรมชาติในขณะที่ height: auto; ซึ่งจะทำให้ความสูงเพิ่มขึ้นตามความจำเป็นเพื่อรองรับเนื้อหา โดยปกติแล้วไม่จำเป็นต้องกำหนดค่าเหล่านี้ เนื่องจากเป็นพฤติกรรมเริ่มต้นอยู่แล้ว

ก็ควรที่จะจำไว้ว่า ประเภทขององค์ประกอบ (แบบบล็อกหรือแบบอินไลน์) สิ่งนี้มีผลต่อวิธีการตีความมิติเหล่านี้ ตัวอย่างเช่น องค์ประกอบแบบอินไลน์จะไม่ทำงานเหมือนกล่องแบบสมบูรณ์เมื่อทำการกำหนดค่า width y heightและในหลายกรณีจำเป็นต้องเปลี่ยนแปลง display a inline-block o block เพื่อให้มันตอบสนองตามที่เราคาดหวัง

หากคุณตัดสินใจกำหนดขนาดความกว้างและความสูงที่เฉพาะเจาะจง คุณกำลังสร้าง "กรอบ" ที่ตายตัว ดังนั้น เนื้อหาใดๆ ที่มีขนาดเกินกว่าที่กำหนด อาจทำให้เกิดความรู้สึกหนักหน่วงทางสายตาได้อาจมีการทับซ้อนกันหรือมีแถบเลื่อน ขึ้นอยู่กับการตั้งค่าคุณสมบัติอื่นๆ ของคุณ

จะเกิดอะไรขึ้นเมื่อเนื้อหาไม่พอดี: เนื้อหาล้นและรั่วไหล

เมื่อทำการกำหนดค่า ความกว้างและความสูงคงที่ เมื่อคุณปรับขนาดขององค์ประกอบ อาจเป็นไปได้ว่าเนื้อหาภายในจะมีขนาดใหญ่กว่าพื้นที่ที่คุณจัดสรรไว้ ความไม่ตรงกันนี้อาจทำให้เกิดปัญหาต่างๆ เช่น ข้อความ "ล้น" ออกจากกรอบ มีแถบเลื่อนปรากฏขึ้นโดยไม่คาดคิด หรือแม้กระทั่งบดบังส่วนหนึ่งของเนื้อหา

เพื่อควบคุมพฤติกรรมนี้ จึงใช้คุณสมบัติดังกล่าว overflowซึ่งระบุว่า เบราว์เซอร์ควรตอบสนองอย่างไรเมื่อเนื้อหาล้นเกินพื้นที่ที่มองเห็นได้? ขององค์ประกอบ ค่าที่พบได้บ่อยที่สุดคือ:

• มองเห็นได้: คือค่าเริ่มต้น เนื้อหาที่ไม่พอดีจะ "ล้น" ออกมาและอาจทับซ้อนกับรายการอื่นๆ
• ซ่อนเร้นเนื้อหาที่มีขนาดเกินกำหนดจะถูกตัดออกและมองไม่เห็น แถบเลื่อนจะไม่ปรากฏขึ้น
• เลื่อนแถบเลื่อน (แนวนอน แนวตั้ง หรือทั้งสองอย่าง) จะแสดงอยู่เสมอ แม้ว่าเนื้อหาจะพอดีโดยไม่ล้นก็ตาม
• รถยนต์แถบเลื่อนจะปรากฏขึ้นก็ต่อเมื่อเนื้อหามีขนาดเกินขอบเขตของกล่องเท่านั้น

ถ้าคุณใช้ overflow: visible; และคุณได้กำหนดไว้แล้ว ขนาดคงที่สำหรับกล่องเนื้อหาส่วนเกินจะถูกวาดทับเนื้อหาส่วนถัดไป ซึ่งมักส่งผลให้ดูไม่สวยงาม ดังนั้น เมื่อทำงานกับกล่องที่มีความสูงหรือความกว้างจำกัด จึงมักใช้... hidden o auto เพื่อจำกัดเนื้อหานั้น

นอกจากนี้ ยังมีการใช้งานที่น่าสนใจอีกอย่างหนึ่งคือ overflow: auto; เกี่ยวข้องกับ องค์ประกอบลอยตัวการกำหนดค่านี้สามารถบังคับให้คอนเทนเนอร์คำนึงถึงความสูงขององค์ประกอบที่ลอยอยู่ภายใน ป้องกันไม่ให้ความสูงของคอนเทนเนอร์ลดลง และช่วยปรับปรุงการคำนวณขนาดสุดท้ายขององค์ประกอบหลัก

ความกว้างขั้นต่ำ ความกว้างสูงสุด ความสูงขั้นต่ำ และความสูงสูงสุด: ข้อจำกัดด้านขนาด

แทนที่จะกำหนดขนาดที่ตายตัวด้วย width o heightมันมีความยืดหยุ่นมากกว่ามาก กำหนดขีดจำกัดต่ำสุดและสูงสุด ซึ่งช่วยให้การออกแบบดูโปร่งโล่ง นั่นคือจุดประสงค์ของฟีเจอร์ต่างๆ นั่นเอง min-width, max-width, min-height y max-heightซึ่งทำหน้าที่เป็นป้ายหยุดรถ

มีสรรพคุณ min-width y min-height แสดง ขนาดขั้นต่ำที่องค์ประกอบสามารถมีได้พวกมันถูกแสดงออกมาในลักษณะเดียวกันกับ width y heightโดยใช้ค่าตัวเลขและหน่วย (พิกเซล, เปอร์เซ็นต์ ฯลฯ) และหากใช้เปอร์เซ็นต์ ค่าเหล่านั้นจะคำนวณโดยอ้างอิงจากคอนเทนเนอร์หลัก เช่นเดียวกับความกว้างปกติ

นอกจากนี้ max-width y max-height เครื่องหมาย ขนาดสูงสุดที่อนุญาตสำหรับความกว้างหรือความสูงหากพื้นที่ว่างมีจำกัด สามารถลดขนาดขององค์ประกอบลงได้ แต่จะไม่เกินขนาดสูงสุดที่คุณกำหนดไว้ในสไตล์ชีตอย่างแน่นอน

ตัวอย่างการใช้งานทั่วไปได้แก่:


div {
width: 100%;
min-width: 300px;
max-width: 800px;
height: 200px;
background: red;
}


ด้วยการกำหนดค่านี้ องค์ประกอบดังกล่าวพยายามที่จะ ใช้พื้นที่ความกว้างทั้งหมดที่มีอยู่ ขอบคุณ width: 100%;แต่จะไม่แคบกว่า 300 พิกเซลหรือกว้างกว่า 800 พิกเซล เมื่อคุณปรับขนาดหน้าต่างเบราว์เซอร์ คุณจะเห็นว่ากรอบนั้นปรับขนาดได้อย่างราบรื่นภายในขอบเขตเหล่านั้น

ค่าเริ่มต้น, min-width y min-height มีมูลค่า 0กล่าวคือ ไม่กำหนดขนาดขั้นต่ำใดๆ ในขณะที่ max-width y max-height พวกมันมีค่าเริ่มต้น noneนั่นหมายความว่า หากคุณไม่เปลี่ยนแปลงค่าเหล่านั้น จะไม่มีขีดจำกัดสูงสุด และองค์ประกอบนั้นสามารถเติบโตได้มากเท่าที่บริบทโดยรอบจะเอื้ออำนวย

ความแตกต่างในทางปฏิบัติระหว่างความกว้าง ความกว้างสูงสุด และความกว้างต่ำสุด

ในการออกแบบเลย์เอาต์สมัยใหม่ สิ่งสำคัญคือต้องเข้าใจเป็นอย่างดี ควรใช้เมื่อใด width และเมื่อไหร่ควรวางเดิมพัน max-width o min-widthเพราะนั่นคือสิ่งที่กำหนดว่าการออกแบบของคุณจะตอบสนองต่อทุกการใช้งานหรือจะสร้างปัญหาให้ปวดหัวกันแน่

สถานที่ให้บริการ width กำหนดขนาดที่แน่นอนองค์ประกอบนั้นจะมีขนาดความกว้างเท่านี้เสมอ ไม่ว่าอย่างไรก็ตาม เว้นแต่คุณจะแก้ไขขนาดความกว้างในภายหลังด้วย media queries เช่น หากคุณใช้สิ่งต่างๆ เช่น width: 1000px; หากคุณเข้าชมหน้านี้บนอุปกรณ์มือถือ คุณอาจพบว่าหน้าเว็บต้องเลื่อนในแนวนอน และการออกแบบจะผิดเพี้ยนไปอย่างสิ้นเชิง

แทน max-width กำหนด ขีดจำกัดบนที่ยืดหยุ่น. ตัวอย่างเช่น

.contenedor { max-width: 600px; }

ด้วยกฎนี้ องค์ประกอบจะไม่เกินความกว้าง 600 พิกเซล แต่ถ้าคอนเทนเนอร์หรือหน้าจอแคบกว่า องค์ประกอบจะย่อขนาดลงโดยไม่มีปัญหา ป้องกันการล้น กฎนี้เหมาะสำหรับข้อความหรือบล็อกเนื้อหาหลักที่คุณต้องการความสามารถในการอ่านสูงสุดที่สะดวกสบาย ในขณะที่ยังคงปรับให้เข้ากับหน้าจอขนาดเล็กได้

สำหรับส่วนของตน min-width มันช่วยให้คุณรับประกันได้ว่าองค์ประกอบนั้น อย่าทำให้มันแคบเกินไปตัวอย่างเช่น ในการจัดวางแบบคอลัมน์ คุณสามารถป้องกันไม่ให้การ์ดหรือกลุ่มข้อมูลถูกบีบอัดบนหน้าจอขนาดเล็กมาก โดยคงความกว้างขั้นต่ำที่อ่านได้ไว้

การใช้งานจริงของ max-width ในการออกแบบที่ตอบสนองต่อขนาดหน้าจอ

ภายในชุดคุณสมบัติทั้งหมดนี้ max-width มันอาจเป็นหนึ่งในสิ่งที่มีประโยชน์ที่สุด เมื่อพูดถึงการออกแบบและเลย์เอาต์ที่ตอบสนองต่อขนาดหน้าจอต่างๆ

การใช้งานครั้งแรกที่พบได้บ่อยมากคือการนำไปใช้กับ คอนเทนเนอร์หลักของหน้าเว็บ. ตัวอย่างเช่น


.main-content {
max-width: 1200px;
margin: 0 auto;
}


ด้วยวิธีนี้ เนื้อหาจะไม่ขยายออกไปอย่างไม่มีที่สิ้นสุดบนหน้าจอขนาดใหญ่ ซึ่งจะช่วยปรับปรุงความอ่านง่าย (โดยเฉพาะในข้อความยาวๆ) โดยการผสมผสานกับ margin: 0 auto;คุณจัดวางบล็อกให้อยู่ตรงกลางหน้าจออย่างสวยงาม โดยเว้นระยะขอบด้านข้างอย่างสมดุล

อีกหนึ่งสถานการณ์ที่พบได้บ่อยมากคือสถานการณ์ดังต่อไปนี้ รูปภาพที่ต้องปรับขนาดได้อย่างราบรื่นกฎที่แทบจะเป็นข้อบังคับใน CSS สมัยใหม่ทุกฉบับคือ:


img {
max-width: 100%;
height: auto;
}


วิธีนี้ช่วยให้มั่นใจได้ว่าภาพจะไม่กว้างเกินกว่ากรอบ (ป้องกันไม่ให้ภาพเสียรูปทรง) และด้วยเหตุนี้ height: auto;สัดส่วนดั้งเดิมได้รับการรักษาไว้โดยไม่บิดเบือน นี่เป็นพื้นฐานที่สำคัญสำหรับ ปรับแต่งรูปภาพสำหรับเว็บ โดยไม่ต้องใช้วิธีการแฮ็กใดๆ

ในเลย์เอาต์ที่สร้างด้วย เฟล็กซ์บ็อกซ์ หรือ CSS Grid, max-width นอกจากนี้ยังทำหน้าที่เป็น "ตัวหยุด" เพื่อป้องกันไม่ให้องค์ประกอบบางอย่าง เช่น การ์ดหรือโมดูล ยืดออกมากเกินไปบนหน้าจอขนาดใหญ่ ตัวอย่างเช่น:


.tarjeta {
flex: 1;
max-width: 400px;
}


วิธีนี้จะช่วยให้มั่นใจได้ว่าการ์ดแต่ละใบจะใช้พื้นที่ที่มีอยู่ร่วมกัน แต่จะไม่เกินความกว้างที่เหมาะสม ทำให้ดูสวยงามสมดุล

คุณลักษณะความกว้างและความสูงในแท็ก img และความสัมพันธ์กับ CSS

นอกจากการควบคุมขนาดจาก CSS แล้ว รูปภาพใน HTML ยังมีคุณสมบัติอื่นๆ อีกด้วย คุณสมบัติ width y height บนฉลากนั้นเอง <img>คุณสมบัติเหล่านี้ระบุความกว้างและความสูงที่ควรแสดงภาพบนหน้าเว็บ โดยปกติจะระบุเป็นพิกเซลตามค่าเริ่มต้น

หากคุณไม่ได้ระบุคุณลักษณะใดๆ เหล่านั้น เบราว์เซอร์จะแสดงภาพโดยไม่มีคุณลักษณะดังกล่าว ขนาดดั้งเดิมของมันหากคุณระบุค่าเหล่านั้น เบราว์เซอร์จะปรับขนาดภาพให้เป็นไปตามค่าเหล่านั้นสำหรับการแสดงผล แต่จะไม่แก้ไขไฟล์จริงบนดิสก์ เพียงแต่แก้ไขเฉพาะการแสดงผลบนหน้าจอเท่านั้น

เมื่อระบุคุณลักษณะเพียงหนึ่งในสองอย่างเท่านั้น จะใช้ได้ก็ต่อเมื่อ... width o height, เนวิเกเตอร์ ปรับขนาดมิติอื่นให้เป็นสัดส่วนกันการรักษาสัดส่วนของภาพและป้องกันการบิดเบี้ยว หากคุณกำหนดทั้งสองอย่าง ภาพจะถูกบังคับให้มีขนาดตามที่คุณตั้งไว้ ซึ่งอาจทำให้ภาพบิดเบี้ยวได้หากไม่เคารพสัดส่วนดั้งเดิม

แนวปฏิบัติที่ดีโดยทั่วไปคือ อย่าขยายภาพให้ใหญ่เกินขนาดจริงมากเกินไปเพราะภาพจะเสียความคมชัดและเบลอ ในกรณีเช่นนี้ ควรเริ่มต้นด้วยภาพที่มีความละเอียดเพียงพอ หรือใช้... กราฟิกเวกเตอร์ เช่น SVGซึ่งช่วยให้สามารถขยายขนาดได้โดยไม่สูญเสียคุณภาพ

ยังมีรายละเอียดสำคัญอีกอย่างหนึ่ง: ถ้าคุณไม่ใส่ width y height ในฉลาก <img>เบราว์เซอร์ไม่ทราบล่วงหน้าว่าจะต้องสำรองพื้นที่สำหรับรูปภาพนั้นในลำดับการแสดงผลของหน้าเว็บเท่าใด ซึ่งอาจก่อให้เกิดปัญหาได้ การกระโดดข้ามเนื้อหา เมื่อภาพดาวน์โหลดเสร็จสมบูรณ์ เอฟเฟ็กต์ภาพนี้อาจสร้างความรำคาญ โดยเฉพาะกับภาพขนาดใหญ่

HTML เวอร์ชันเก่าก็เคยใช้เช่นกัน เปอร์เซ็นต์ในคุณลักษณะความกว้างและความสูง จากภาพนั้น width="100%"เพื่อให้ภาพพอดีกับความกว้างที่มีอยู่ทั้งหมด ในปัจจุบัน ด้วยการใช้ CSS และองค์ประกอบต่างๆ เช่น <picture>เทคนิคนี้ค่อนข้างล้าสมัยไปแล้ว แม้ว่าเบราว์เซอร์บางตัวยังคงรองรับอยู่ก็ตาม

การควบคุมขนาดภาพขั้นสูงด้วยความกว้างสูงสุด

เมื่อนำมาใช้ร่วมกัน จะเกิดการผสมผสานที่น่าสนใจอย่างยิ่ง เปอร์เซ็นต์ในคุณลักษณะ width ของรูปภาพและในขณะเดียวกัน กฎ CSS เพื่อป้องกันไม่ให้มันขยายใหญ่เกินขนาดเดิม ตัวอย่างเช่น:

<img src="graficos/en_rio_grande_800.jpg" style="max-width: 100%; height: auto;">

นี่หมายความว่าภาพไม่ควรมีความกว้างเกิน 100% ของพื้นที่จัดเก็บ และความสูงจะปรับตามสัดส่วน วิธีนี้จะช่วยป้องกันไม่ให้ภาพล้นออกมา และยังป้องกันไม่ให้ภาพขยายใหญ่เกินขนาดปกติหากพื้นที่จัดเก็บมีขนาดใหญ่มาก

ในหลายๆ โครงการ โดยเฉพาะอย่างยิ่งเมื่อมีรูปภาพจำนวนมากที่มีขนาดแตกต่างกัน คำถามที่เกิดขึ้นคือ... ควรจะกำหนดว่า จะดีกว่าหรือไม่ width y height ใน HTML หรือในไฟล์สไตล์ชีต CSSโดยทั่วไปแล้ว คำแนะนำคือให้รวมศูนย์การออกแบบด้านภาพไว้ใน CSS เพื่อแยกเนื้อหาและการนำเสนอออกจากกัน แต่ในกรณีของรูปภาพ หากแต่ละภาพมีขนาดแตกต่างกัน การระบุขนาดของภาพโดยตรงในแท็กอาจเป็นวิธีที่ใช้งานได้จริงมากกว่า โดยไม่ต้องใช้ CSS ที่ซับซ้อนเกินไป

อย่างไรก็ตาม หากคุณมีรูปภาพจำนวนมากที่มีขนาดเท่ากัน หรือต้องการใช้สไตล์เดียวกัน (เช่น มุมโค้งมน เงา ฯลฯ) การกำหนดค่าเหล่านั้นจากไฟล์สไตล์ชีตจะช่วยให้รักษาความสม่ำเสมอได้ ตัวควบคุมที่สะอาดกว่าและนำกลับมาใช้ใหม่ได้ ออกแบบ.

ค่าขนาดที่แท้จริง: เนื้อหาขั้นต่ำ เนื้อหาขั้นสูงสุด การยืด และการพอดีกับเนื้อหา

CSS ยังประกอบด้วยองค์ประกอบต่างๆ อีกหลายประการ ค่าพิเศษที่ออกแบบมาสำหรับขนาด "โดยแท้จริง"ฟังก์ชันเหล่านี้ช่วยให้คุณปรับความกว้างขององค์ประกอบโดยอัตโนมัติตามเนื้อหาที่บรรจุอยู่ โดยเฉพาะอย่างยิ่งมีประโยชน์ในงานออกแบบเลย์เอาต์ขั้นสูง

ความคุ้มค่า min-content บ่งชี้ว่าองค์ประกอบนั้นต้อง ย่อให้เหลือขนาดเล็กที่สุดเท่าที่จำเป็นเพื่อแสดงเนื้อหาโดยไม่ทำให้เสียหายเช่น "ให้มีขนาดเล็กที่สุดเท่าที่จะเป็นไปได้โดยไม่ตัดคำหรือเนื้อหาออกอย่างไม่ถูกต้อง" มักใช้ร่วมกับคอนเทนเนอร์หรือระบบตาราง

โดยคมชัด max-content ทำให้องค์ประกอบ ขยายให้ถึงขนาดสูงสุดที่เนื้อหาของคุณกำหนดไว้โดยไม่ต้องกำหนดข้อจำกัดเพิ่มเติม กล่าวคือ ความกว้างจะถูกกำหนดโดยพื้นที่ที่จำเป็นสำหรับการแสดงผลเนื้อหาอย่างครบถ้วน

ความคุ้มค่า stretch มันถูกออกแบบมาเพื่อให้กล่องนั้น เหยียดตัวออกและใช้พื้นที่ว่างให้เต็มที่ ภายในคอนเทนเนอร์ของมัน เมื่อกฎการจัดวางอนุญาต นี่เป็นแนวทางที่สอดคล้องกับการออกแบบที่ยืดหยุ่น ซึ่งองค์ประกอบต่างๆ จะถูกกระจายเพื่อเติมเต็มช่องว่างโดยอัตโนมัติ

สุดท้ายนี้ก็คือฟังก์ชันนั่นเอง fit-content()ซึ่งมีวัตถุประสงค์เพื่อกำหนดขนาดให้ใกล้เคียงกับเนื้อหามากที่สุดเท่าที่จะเป็นไปได้ แต่ โดยไม่เกินค่าสูงสุดที่กำหนดไว้อย่างไรก็ตาม การรองรับเบราว์เซอร์ของมันมีจำกัดหรือไม่สมบูรณ์ ดังนั้นจึงควรตรวจสอบความเข้ากันได้หากคุณวางแผนที่จะใช้ในโครงการที่ใช้งานจริง

ตัวอย่างง่ายๆ ของการใช้ค่าเหล่านี้คือ:


.box {
background: indigo;
color: white;
height: 150px;
margin: 1rem 0;
}
.min { width: min-content; }
.max { width: max-content; }
.stretch { width: stretch; }


ด้วยการกำหนดค่าแบบนี้ คุณจะสามารถมองเห็นภาพได้อย่างง่ายดายว่า ค่าแต่ละค่าจะปรับความกว้างของกล่องตามเนื้อหาภายในซึ่งเปิดโอกาสให้สามารถสร้างรูปแบบที่ซับซ้อนได้โดยไม่ต้องคำนวณด้วยมือ

อัตราส่วนภาพ: รักษาอัตราส่วนระหว่างความกว้างและความสูง

อีกหนึ่งคุณสมบัติสำคัญในโลกของการออกแบบเว็บไซต์สมัยใหม่คือ aspect-ratioซึ่งช่วยให้ ควบคุมอัตราส่วนระหว่างความกว้างและความสูง ขององค์ประกอบจาก CSS โดยไม่ต้องกำหนดค่าขนาดทั้งสองอย่างชัดเจน

กับ aspect-ratio คุณสามารถตรวจสอบให้แน่ใจว่ารูปภาพ วิดีโอ หรือกล่องใดๆ ยังคงรักษาคุณสมบัติต่างๆ ไว้ได้ สัดส่วนเท่าเดิมเสมอ (ตัวอย่างเช่น 16:9, 4:3 หรือ 1:1) แม้ว่าจะปรับขนาดตามหน้าจอก็ตาม ซึ่งจะช่วยป้องกันการบิดเบือนและทำให้พฤติกรรมคาดเดาได้มากขึ้น

ค่าที่ยอมรับได้ ได้แก่ auto และสัดส่วนที่แสดงเป็น a / bตัวอย่างเช่น aspect-ratio: 16 / 9;คุณสามารถใช้ตัวเลขทศนิยมที่แสดงอัตราส่วนระหว่างความกว้างและความสูงได้เช่นกัน

ความคุ้มค่า auto คำสั่งนี้จะบอกให้เบราว์เซอร์คำนวณอัตราส่วนที่เหมาะสมโดยอัตโนมัติ ซึ่งโดยปกติจะเริ่มต้นจาก มิติที่แท้จริงของเนื้อหาในทางกลับกัน เมื่อระบุสัดส่วนที่เฉพาะเจาะจง (เช่น 3 / 2) เบราว์เซอร์จะรักษาความสัมพันธ์นั้นไว้ทุกครั้งที่เป็นไปได้ โดยปรับแกนอื่นตามแกนใดแกนหนึ่ง

คุณสมบัตินี้จะมีประโยชน์อย่างยิ่งเมื่อคุณทำงานร่วมกับ แกลเลอรี่รูปภาพ การ์ด วิดีโอฝังตัว หรือส่วนประกอบที่นำกลับมาใช้ใหม่ได้วิธีนี้จะทำให้การแสดงผลภาพเป็นไปอย่างสม่ำเสมอโดยไม่ต้องใช้ "เทคนิค" หรือคอนเทนเนอร์เพิ่มเติม หากคุณมีปัญหาในการจินตนาการว่าความกว้างและความสูงเปลี่ยนแปลงอย่างไรเมื่ออัตราส่วนภาพเปลี่ยนไป คุณสามารถใช้เครื่องคำนวณออนไลน์เพื่อทดลองกับค่าต่างๆ ได้เสมอ

หน่วยและแนวทางปฏิบัติที่ดีที่สุดในการกำหนดขนาด

เมื่อประกาศ width, height, max-width และสำหรับบริษัทนั้น สิ่งสำคัญไม่ได้อยู่ที่มูลค่าตัวเลขเพียงอย่างเดียว แต่ยังมีปัจจัยอื่นๆ อีกด้วย หน่วยที่คุณเลือก- ที่พบมากที่สุดคือ:

• px (พิกเซล): ให้การควบคุมที่แม่นยำมากและเข้าใจง่าย แต่มีความยืดหยุ่นน้อยกว่าในสภาพแวดล้อมที่ตอบสนองต่อสิ่งเร้า
• % (เปอร์เซ็นต์): ค่าเหล่านี้คำนวณโดยสัมพันธ์กับขนาดขององค์ประกอบหลัก ทำให้สามารถออกแบบให้เหมาะสมกับคอนเทนเนอร์ได้ดียิ่งขึ้น
• เอ็ม / เรมหน่วยที่เกี่ยวข้องกับขนาดตัวอักษร มีประโยชน์เมื่อคุณต้องการ ขนาดของกล่องจะเพิ่มขึ้นหรือลดลงตามรูปแบบตัวอักษรเพื่อส่งเสริมการเข้าถึงได้ง่าย

คำแนะนำทั่วไปคือการใช้ max-width แทนที่ width สำหรับตู้คอนเทนเนอร์ทั่วโลกจำนวนมาก โดยเฉพาะอย่างยิ่งในแนวทางหนึ่ง โทรศัพท์มือถือครั้งแรกด้วยวิธีนี้ เนื้อหาจะถูกย่อลงเมื่ออุปกรณ์มีขนาดเล็ก แต่จะไม่ขยายใหญ่เกินไปบนหน้าจอที่กว้างมาก

นอกจากนี้ ยังควรจับตาดูการผสมผสานของสิ่งต่างๆ เหล่านี้ด้วย เปอร์เซ็นต์ที่มีการเว้นระยะและแบบจำลองกล่องหากคอนเทนเนอร์หลักไม่ได้ใช้งาน box-sizing: border-box;เส้นขอบและระยะห่างภายในอาจทำให้ความกว้างที่ใช้งานได้จริงมากกว่าที่คาดไว้ ส่งผลให้เกิดปัญหาการแสดงผลเกินขอบเขตหรือแถบเลื่อนแนวนอน

สำหรับองค์ประกอบข้อความยาว แบบฟอร์ม หรือกล่องเนื้อหาหลัก การตั้งค่ามักจะเป็นประโยชน์ ความกว้างในการอ่านสูงสุดตัวอย่างเช่นด้วย max-width: 600px; หรือค่าที่ใกล้เคียงกัน วิธีนี้จะช่วยไม่ให้ข้อความยาวจนเกินไปบนหน้าจอขนาดใหญ่ ช่วยปรับปรุงประสบการณ์การใช้งานของผู้ใช้

สุดท้ายนี้ ควรหลีกเลี่ยงการใช้งานมากเกินไป width โดยใช้ค่าพิกเซลคงที่สำหรับบล็อกเค้าโครงหลัก สงวนค่าเหล่านี้ไว้สำหรับ ส่วนประกอบที่เฉพาะเจาะจงมาก (ไอคอน ปุ่ม องค์ประกอบตกแต่ง) และการปล่อยให้ส่วนอื่นๆ ของการออกแบบมีพื้นที่หายใจด้วยเปอร์เซ็นต์ ขีดจำกัดต่ำสุดและสูงสุด มักจะให้ผลลัพธ์ที่แข็งแกร่งกว่า

โดยรวมแล้ว เพื่อให้เข้าใจอย่างลึกซึ้ง พวกเขามีปฏิสัมพันธ์กันอย่างไร width, height, min/max-*, overflowขนาดที่แท้จริงและอัตราส่วนด้าน มันช่วยให้คุณสร้างเลย์เอาต์ที่แข็งแกร่งซึ่งดูดีบนทุกอุปกรณ์และปรับเปลี่ยนได้อย่างราบรื่น เมื่อคุณเข้าใจแนวคิดเหล่านี้แล้ว การปรับขนาดของแต่ละองค์ประกอบจะไม่ใช่เรื่องยากลำบากอีกต่อไป และจะกลายเป็นเครื่องมือที่จะช่วยคุณในการออกแบบอินเทอร์เฟซที่สะอาดตา อ่านง่าย และลื่นไหล