การออกแบบเว็บที่ตอบสนอง - ภาพถ่าย
ใช้แอตทริบิวต์กว้าง
ถ้าแอตทริบิวต์ความกว้างถูกตั้งไว้ที่ 100% ภาพจะได้รับการตระหนักให้สอดคล้องกับช่วงบนและล่างของฟังก์ชั่นที่ตอบสนองต่อ:
โปรดทราบว่าในตัวอย่างข้างต้นภาพจะมีขนาดใหญ่กว่าภาพเดิม เราสามารถใช้ความกว้างสูงสุดแอตทริบิวต์เป็นทางออกที่ดีในการแก้ไขปัญหานี้
การใช้ความกว้างสูงสุดคุณสมบัติ
ถ้าคุณสมบัติความกว้างสูงสุดถูกตั้งไว้ที่ 100% ภาพที่ไม่เคยจะมีขนาดใหญ่กว่าขนาดเดิม:
เพิ่มหน้าภาพ
ภาพพื้นหลัง
ภาพพื้นหลังสามารถตอบสนองต่อการปรับขนาดหรือซูม
ต่อไปนี้เป็นสามวิธีที่แตกต่างกัน
1. ถ้าคุณสมบัติพื้นหลังขนาดตั้ง "มี" ภาพพื้นหลังจะเป็นอัตราส่วนพื้นที่เนื้อหาการปรับตัว ภาพถ่ายรักษาสัดส่วนไม่เปลี่ยนแปลง:
นี้เป็นโค้ด CSS:
ตัวอย่าง
ความกว้าง: 100%;
ความสูง: 400px;
ภาพพื้นหลัง: URL ( 'img_flowers.jpg ');
พื้นหลังซ้ำ: ไม่มีซ้ำ;
พื้นหลัง-size: ประกอบด้วย;
ชายแดน: 1px ของแข็งสีแดง;
}
ลอง»
2. ถ้าคุณสมบัติพื้นหลังขนาดตั้งค่าเป็น "100% 100%", ภาพพื้นหลังจะได้รับการขยายให้ครอบคลุมทั้งภูมิภาค:
ตัวอย่าง
นี้เป็นโค้ด CSS:
ความกว้าง: 100%;
ความสูง: 400px;
ภาพพื้นหลัง: URL ( 'img_flowers.jpg ');
พื้นหลัง-size: 100% 100% ;
ชายแดน: 1px ของแข็งสีแดง;
}
ลอง»
3. ถ้าคุณสมบัติพื้นหลังขนาดตั้ง "ครอบคลุม" ภาพพื้นหลังที่มีการขยายตัวจะมีขนาดใหญ่พอที่จะสมบูรณ์ครอบคลุมพื้นหลังเพื่อให้พื้นที่ภาพพื้นหลัง โปรดทราบว่าสถานที่ให้บริการยังคงสัดส่วนของภาพเพื่อให้เป็นส่วนหนึ่งของภาพพื้นหลังบางอย่างไม่สามารถแสดงได้ในพื้นที่การวางตำแหน่งพื้นหลัง
นี้เป็นโค้ด CSS:
ตัวอย่าง
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
ลอง»
อุปกรณ์ที่แตกต่างแสดงให้เห็นภาพที่แตกต่าง
ภาพขนาดใหญ่สามารถแสดงผลบนหน้าจอขนาดใหญ่ แต่พวกเขาไม่ได้แสดงได้ดีบนหน้าจอขนาดเล็ก เราไม่จำเป็นต้องโหลดขึ้นหน้าจอขนาดเล็กในภาพใหญ่จึงมีผลกระทบต่อความเร็วในการโหลด ดังนั้นเราจึงสามารถใช้คำสั่งสื่อขึ้นอยู่กับอุปกรณ์ที่จะแสดงภาพที่แตกต่างกัน
ภาพใหญ่ต่อไปนี้และภาพขนาดเล็กจะปรากฏบนอุปกรณ์ที่แตกต่าง:
ตัวอย่าง
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');
}
}
ลอง»
คุณสามารถใช้คำสั่งสื่อนาทีอุปกรณ์ที่มีความกว้างแทนนาทีความกว้างแอตทริบิวต์จะตรวจสอบความกว้างของอุปกรณ์แทนของความกว้างของเบราว์เซอร์ รีเซ็ตขนาดเบราว์เซอร์ขนาดของภาพไม่เปลี่ยนแปลง
ตัวอย่าง
ร่างกาย {
ภาพพื้นหลัง: URL ( 'img_smallflower.jpg ');
}
/ * อุปกรณ์มีขนาดใหญ่กว่า 400px (หรือเท่ากับ): * /
@media เพียงหน้าจอและ (นาทีอุปกรณ์ กว้าง: 400px) {
ร่างกาย {
ภาพพื้นหลัง: URL ( 'img_flowers.jpg ');
}
}
ลอง»
HTML5 <ภาพ> องค์ประกอบ
HTML5 ของ <picture> องค์ประกอบที่สามารถตั้งค่าภาพหลายภาพ
สนับสนุนเบราว์เซอร์
| ธาตุ | |||||
|---|---|---|---|---|---|
| <ภาพ> | ไม่สนับสนุน | 38.0 | 38.0 | ไม่สนับสนุน | 25.0 |
<picture> องค์ประกอบคล้ายกับ <video> และ <audio> องค์ประกอบ อุปกรณ์ที่แตกต่างสามารถเป็นทรัพยากรทรัพยากรชุดแรกของการใช้งานที่ต้องการ:
ตัวอย่าง
<มา srcset = "img_smallflower.jpg" สื่อ = "(แม็กซ์ความกว้าง: 400px)">
<มา srcset = "img_flowers.jpg">
<img src = "img_flowers.jpg" alt = "ดอกไม้">
</ รูปภาพ>
ลอง»
srcset คุณสมบัติจะต้องเป็นความหมายของทรัพยากรภาพ
media แอตทริบิวต์เป็นตัวเลือกในสื่อ queries กฎ @media CSS ดูรายละเอียด
ไม่สนับสนุน <picture> องค์ประกอบเบราว์เซอร์ที่คุณสามารถกำหนด <img> องค์ประกอบแทน