ในหน้าเว็บปัจจุบันต้องทำให้รองรับทั้งในรูปแบบหน้าเดสท็อป แท็บเล็ตและสมาทร์โฟน โดยเราสามารถทำให้รูปภาพย่อตามขนาดของหน้าจอทั้งหน้าเดสท็อป แท็บเล็ตและสมาทร์โฟนโดยใช้ css และ JavaScript ได้โดยมีวิธีการทำดังนี้
ขั้นตอนการปรับรูปภาพให้ย่อตามขนาดของหน้าจอ ดังนี้
- 1.ในส่วนของ <head> ใน <meta> มีการเพิ่ม content="width=device-width, initial-scale=1" ก็คือเป็นการบอกว่าเว็บนี้จะมีขนาดให้รองรับกับอุปกรณ์ที่เป้ด
2.ใส่ css ให้ดังโค้ด
โค้ด: เลือกทั้งหมด
<meta name="viewport" content="width=device-width, initial-scale=1">
3.ใส่ ตัวJavaScript ดังโค้ดโค้ด: เลือกทั้งหมด
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
4.ในส่วนของรูปภาพในแท็ก <body> ก็ใส่ class img-fluid ให้กับรูปภาพดังโค้ดโค้ด: เลือกทั้งหมด
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
รวมโค้ดทั้งหมดโค้ด: เลือกทั้งหมด
<img class="img-responsive" src="dachshund-1519374_960_720.jpg" border="0">
ผลลัพธ์ที่ได้โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <head> <title>Img Fluid</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <img class="img-responsive" src="dachshund-1519374_960_720.jpg" border="0"> </body> </html>
- ตัวอย่างหน้าจอขนาด 300x415 ตัวอย่างหน้าจอขนาด 600x502 ตัวอย่างหน้าจอขนาด 1349x512
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Booststap HTML css