ไดเรกทอรีบทความ
เนื่องจากอินเทอร์เน็ตบนมือถือที่เฟื่องฟูการตลาด WeChatความนิยมของโทรศัพท์มือถือได้กลายเป็นชีวิตเครื่องมือที่ต้องมี
站แนะนำให้ใช้แม่แบบWordPressธีมที่ปรับเปลี่ยนได้สำหรับ:
- หากผู้พัฒนาธีม WordPress ไม่ได้สร้างหน้าจอปรับภาพ HTML 5 ให้ดีเมื่อออกแบบหน้าธีม WordPress...
- เมื่อเรียกดูเว็บไซต์บนอุปกรณ์มือถือจะมีการจัดแนวภาพที่น่าเกลียดมากและประสบการณ์ผู้ใช้ก็แย่มาก!
การปรับภาพ CSS หมายความว่าอย่างไร
CSS image adaptive หมายถึงการสร้างรูปภาพในหน้าเว็บ html ผ่านโค้ด CSS:
- ปรับให้เข้ากับความกว้างและความสูงของอุปกรณ์ต่างๆ โดยอัตโนมัติ
- แท็ก img จะถูกปรับขนาดตามสัดส่วนโดยอัตโนมัติ
ต่อไป,เฉิน เว่ยเหลียงฉันจะแบ่งปันรหัสการปรับขนาดตามสัดส่วน CSS img กับคุณ ^_^
โค้ดปรับความสูงและความกว้างของภาพ CSS
แทรกรูปภาพใน html:
หากคุณต้องการให้รูปภาพปรับให้เข้ากับขนาดที่เล็กของหน้าจอแทนที่จะคงความกว้างและความสูงไว้
คุณสามารถเพิ่มโค้ดต่อไปนี้ในไฟล์ style.css ของธีม WordPress ของคุณ ▼
/*图片自适应宽度和高度*/
img { max-width: 100%; height: auto; width: auto\9; width: auto; }ประกาศที่นี่max-widthกฎความกว้างสูงสุด
- เพื่อให้แน่ใจว่ารูปภาพทั้งหมดแสดงได้สูงสุด 100% (กล่าวคือ สามารถแสดงได้ขนาดใหญ่เท่ากับรูปภาพของตัวเองเท่านั้น)
- ณ จุดนี้ หากองค์ประกอบที่มีรูปภาพ (เช่น เนื้อหาหรือ div ที่มีรูปภาพ) มีขนาดเล็กกว่าความกว้างโดยธรรมชาติของรูปภาพ รูปภาพนั้นจะถูกปรับขนาดให้เต็มพื้นที่ว่างสูงสุด
width:auto;หมายถึงความกว้างอัตโนมัติ
\9 เป็นวิธีการเขียน hack css
- ด้วยวิธีนี้ "\9" จะถูกเพิ่มลงในโค้ด css ปกติ มีเพียงเบราว์เซอร์ IE เท่านั้นที่สามารถรับรู้ได้ เบราว์เซอร์อื่นๆ จะไม่สนใจคำสั่งนี้
- สิ่งนี้จะทำให้เกิดความแตกต่างของเบราว์เซอร์ ทำให้วัตถุประสงค์ของเบราว์เซอร์ที่เข้ากันได้
ทำไมไม่ใช้ความกว้าง: 100%?
หากต้องการปรับขนาดภาพโดยอัตโนมัติ คุณสามารถใช้คุณสมบัติความกว้างที่ใช้กันทั่วไปได้ เช่นwidth：100％.
อย่างไรก็ตาม กฎนี้ใช้ไม่ได้ที่นี่
- เพราะกฎนี้จะทำให้ดูกว้างเท่าคอนเทนเนอร์
- ในกรณีที่คอนเทนเนอร์กว้างกว่ารูปภาพมาก รูปภาพจะถูกขยายโดยไม่จำเป็น
注意事项
ตัวเลือก CSS คืออะไร? ความแตกต่างระหว่างคลาสและ id คืออะไร?บทช่วยสอนต่อไปนี้พูดถึง ▼
เว็บไซต์บนมือถือเล่นวิดีโอ MP4 ที่ปรับให้เข้ากับหน้าได้อย่างไรกรุณาคลิกที่ลิงค์ด้านล่าง ▼
หวัง Chen Weiliang บล็อก ( https://www.chenweiliang.com/ ) แชร์ "หน้าเว็บ HTML 5 ภาพหน้าจอที่ปรับเปลี่ยนได้ img รหัสมาตราส่วนตามสัดส่วน" ซึ่งเป็นประโยชน์กับคุณ
ยินดีต้อนรับสู่การแบ่งปันลิงค์ของบทความนี้:https://www.chenweiliang.com/cwl-964.html
ยินดีต้อนรับสู่ช่อง Telegram ของบล็อกของ Chen Weiliang เพื่อรับข่าวสารล่าสุด!
📚 คู่มือนี้มีคุณค่ามหาศาล 🌟 นี่เป็นโอกาสที่หายาก อย่าพลาด! ⏰⌛💨
แชร์และชอบถ้าคุณชอบ!
การแบ่งปันและไลค์ของคุณเป็นแรงจูงใจอย่างต่อเนื่องของเรา!