วิธีปรับรูปภาพให้ย่อตามขนาดของหน้าจอ

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 4859
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

วิธีปรับรูปภาพให้ย่อตามขนาดของหน้าจอ

โพสต์ที่ยังไม่ได้อ่าน โดย Parichat »

วิธีปรับรูปภาพให้ย่อตามขนาดของหน้าจอ

ในหน้าเว็บปัจจุบันต้องทำให้รองรับทั้งในรูปแบบหน้าเดสท็อป แท็บเล็ตและสมาทร์โฟน โดยเราสามารถทำให้รูปภาพย่อตามขนาดของหน้าจอทั้งหน้าเดสท็อป แท็บเล็ตและสมาทร์โฟนโดยใช้ css และ JavaScript ได้โดยมีวิธีการทำดังนี้

ขั้นตอนการปรับรูปภาพให้ย่อตามขนาดของหน้าจอ ดังนี้
  • 1.ในส่วนของ <head> ใน <meta> มีการเพิ่ม content="width=device-width, initial-scale=1" ก็คือเป็นการบอกว่าเว็บนี้จะมีขนาดให้รองรับกับอุปกรณ์ที่เป้ด

    โค้ด: เลือกทั้งหมด

    <meta name="viewport" content="width=device-width, initial-scale=1">
    2.ใส่ css ให้ดังโค้ด

    โค้ด: เลือกทั้งหมด

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
    3.ใส่ ตัวJavaScript ดังโค้ด

    โค้ด: เลือกทั้งหมด

    <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>
    
    4.ในส่วนของรูปภาพในแท็ก <body> ก็ใส่ class img-fluid ให้กับรูปภาพดังโค้ด

    โค้ด: เลือกทั้งหมด

    <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
      300x415_1.jpg
      300x415_1.jpg (17.12 KiB) Viewed 5007 times
      ตัวอย่างหน้าจอขนาด 600x502
      600x502_2.jpg
      600x502_2.jpg (32.35 KiB) Viewed 5007 times
      ตัวอย่างหน้าจอขนาด 1349x512
      1349x512_3.jpg
      1349x512_3.jpg (33.51 KiB) Viewed 5007 times
จากนั้นรูปภาพของเราก็รองรับทุกอุปกรณ์ทั้งหมดทุกขนาดทั้งหน้าเดสท็อป แท็บเล็ตและสมาทร์โฟน

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Booststap HTML css
Live Simply, Laugh Often, Love Deeply.....

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 31