โดยใช้สถานที่ให้บริการความกว้าง
ถ้า width ตั้งค่าคุณสมบัติเป็น 100% ภาพจะมีการตอบสนองและการเพิ่มระดับขึ้นและลง:
ขอให้สังเกตว่าในตัวอย่างข้างต้นภาพที่สามารถปรับขนาดขึ้นจะมีขนาดใหญ่กว่าขนาดเดิม วิธีการแก้ปัญหาที่ดีกว่าในหลายกรณีจะใช้ max-width อสังหาริมทรัพย์แทน
โดยใช้สถานที่ให้บริการความกว้างสูงสุด
ถ้า max-width ตั้งค่าคุณสมบัติเป็น 100% ภาพจะขนาดลงถ้ามันมี แต่ไม่เคยไต่ขึ้นจะมีขนาดใหญ่กว่าขนาดเดิม:
เพิ่มรูปภาพที่เว็บหน้าตัวอย่าง
ภาพพื้นหลัง
ภาพพื้นหลังยังสามารถตอบสนองต่อการปรับขนาดและปรับ
ที่นี่เราจะแสดงวิธีการสามวิธีที่แตกต่างกัน
1. ถ้า background-size การตั้งค่าคุณสมบัติที่ "มี" ภาพพื้นหลังจะปรับขนาดและพยายามที่จะพอดีกับพื้นที่เนื้อหา แต่ภาพจะให้อัตราส่วนของมัน (ความสัมพันธ์ระหว่างสัดส่วนความกว้างของภาพและความสูง):
นี่คือโค้ด CSS:
ตัวอย่าง
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
} ลองตัวเอง» 2. ถ้า background-size ตั้งค่าคุณสมบัติเป็น "100% 100%", ภาพพื้นหลังจะมีการยืดเพื่อให้ครอบคลุมพื้นที่เนื้อหาทั้งหมด:
นี่คือโค้ด CSS:
ตัวอย่าง
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
} ลองตัวเอง» 3. หาก background-size การตั้งค่าคุณสมบัติ "cover" ภาพพื้นหลังจะปรับขนาดเพื่อครอบคลุมพื้นที่เนื้อหาทั้งหมด ขอให้สังเกตว่า "cover" ค่าช่วยให้อัตราส่วนและเป็นส่วนหนึ่งของภาพพื้นหลังบางคนอาจจะตัด:
นี่คือโค้ด CSS:
ตัวอย่าง
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
} ลองตัวเอง» ภาพที่แตกต่างสำหรับอุปกรณ์ที่แตกต่างกัน
ภาพขนาดใหญ่สามารถที่สมบูรณ์แบบบนหน้าจอคอมพิวเตอร์ขนาดใหญ่ แต่ไร้ประโยชน์ในอุปกรณ์ขนาดเล็ก โหลดภาพขนาดใหญ่ทำไมเมื่อคุณมีการชั่งมันลงหรือไม่? เพื่อลดภาระหรือด้วยเหตุผลอื่น ๆ ที่คุณสามารถใช้คำสั่งสื่อในการแสดงภาพที่แตกต่างกันบนอุปกรณ์ที่แตกต่างกัน
นี่คือภาพที่มีขนาดใหญ่และขนาดเล็กภาพหนึ่งที่จะปรากฏบนอุปกรณ์ที่แตกต่าง:
ตัวอย่าง
/* For width smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For width 400px and larger: */
@media only screen and (min-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
} ลองตัวเอง» คุณสามารถใช้สื่อแบบสอบถาม min-device-width แทน min-width ซึ่งจะตรวจสอบความกว้างของอุปกรณ์แทนของความกว้างของเบราว์เซอร์ จากนั้นภาพจะไม่เปลี่ยนแปลงเมื่อคุณปรับขนาดหน้าต่างเบราว์เซอร์:
ตัวอย่าง
/* For devices smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For devices 400px and larger: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
} ลองตัวเอง» HTML5 <picture> ธาตุ
HTML5 แนะนำ <picture> องค์ประกอบซึ่งจะช่วยให้คุณกำหนดมากกว่าหนึ่งภาพ
สนับสนุนเบราว์เซอร์
| ธาตุ | |||||
|---|---|---|---|---|---|
| <picture> | ได้รับการสนับสนุน | 38.0 | 38.0 | ได้รับการสนับสนุน | 25.0 |
<picture> องค์ประกอบการทำงานคล้ายกับ <video> และ <audio> องค์ประกอบ คุณสามารถตั้งค่าแหล่งที่แตกต่างกันและแหล่งแรกที่เหมาะกับการตั้งค่าเป็นหนึ่งที่ใช้:
ตัวอย่าง
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture> ลองตัวเอง» srcset แอตทริบิวต์ที่จำเป็นและกำหนดแหล่งที่มาของภาพ
media แอตทริบิวต์เป็นตัวเลือกและยอมรับคำสั่งสื่อที่คุณพบใน กฎ @media CSS
นอกจากนี้คุณควรกำหนด <img> องค์ประกอบสำหรับเบราว์เซอร์ที่ไม่สนับสนุน <picture> องค์ประกอบ