การออกแบบเว็บที่ตอบสนอง - รูปภาพ
ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูว่ารูปภาพมีขนาดพอดีกับหน้าอย่างไร
การใช้คุณสมบัติความกว้าง
หากwidthตั้งค่าคุณสมบัติเป็นเปอร์เซ็นต์และheightตั้งค่าคุณสมบัติเป็น "อัตโนมัติ" รูปภาพจะตอบสนองและขยายขนาดขึ้นและลง:
ตัวอย่าง
img {
width: 100%;
height: auto;
}
โปรดสังเกตว่าในตัวอย่างด้านบน รูปภาพสามารถขยายให้ใหญ่ขึ้นกว่าขนาดดั้งเดิมได้ ทางออกที่ดีกว่าในหลาย ๆ กรณีคือการใช้
max-widthคุณสมบัติแทน
การใช้คุณสมบัติความกว้างสูงสุด
หากmax-widthตั้งค่าคุณสมบัติเป็น 100% รูปภาพจะลดขนาดลงหากจำเป็น แต่จะไม่ขยายให้ใหญ่กว่าขนาดดั้งเดิม:
ตัวอย่าง
img {
max-width: 100%;
height: auto;
}
เพิ่มรูปภาพในเว็บเพจตัวอย่าง
ตัวอย่าง
img {
width: 100%;
height: auto;
}
ภาพพื้นหลัง
ภาพพื้นหลังสามารถตอบสนองต่อการปรับขนาดและการปรับขนาดได้
ที่นี่เราจะแสดงสามวิธีที่แตกต่างกัน:
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ตั้งค่าคุณสมบัติเป็น "ปก" ภาพพื้นหลังจะปรับขนาดให้ครอบคลุมพื้นที่เนื้อหาทั้งหมด โปรดสังเกตว่าค่า "หน้าปก" จะรักษาอัตราส่วนไว้ และบางส่วนของภาพพื้นหลังอาจถูกตัดออก:
นี่คือรหัส CSS:
ตัวอย่าง
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
รูปภาพต่าง ๆ สำหรับอุปกรณ์ต่าง ๆ
รูปภาพขนาดใหญ่สามารถแสดงบนหน้าจอคอมพิวเตอร์ขนาดใหญ่ได้อย่างสมบูรณ์ แต่ไม่มีประโยชน์ในอุปกรณ์ขนาดเล็ก ทำไมต้องโหลดภาพขนาดใหญ่เมื่อคุณต้องลดขนาดลง? เพื่อลดภาระงานหรือด้วยเหตุผลอื่นใด คุณสามารถใช้คิวรีสื่อเพื่อแสดงภาพต่างๆ บนอุปกรณ์ต่างๆ ได้
นี่คือรูปภาพขนาดใหญ่ 1 รูปและรูปภาพขนาดเล็ก 1 รูปที่จะแสดงในอุปกรณ์ต่างๆ:
ตัวอย่าง
/* 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');
}
}
HTML <รูปภาพ> องค์ประกอบ
องค์ประกอบ HTML <picture>ช่วยให้นักพัฒนาเว็บมีความยืดหยุ่นมากขึ้นในการระบุทรัพยากรภาพ
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture> element works similar to the <video> and
<audio> elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset attribute is required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img> element for browsers that do not support the
<picture> element.