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

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

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

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1401
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

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

โพสต์โดย Parichat » 06/06/2018 11:45 am

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

ในหน้าเว็บปัจจุบันต้องทำให้รองรับทั้งในรูปแบบหน้าเดสท็อป แท็บเล็ตและสมาทร์โฟน โดยเราสามารถทำให้รูปภาพย่อตามขนาดของหน้าจอทั้งหน้าเดสท็อป แท็บเล็ตและสมาทร์โฟนโดยใช้ 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) เปิดดู 59 ครั้ง


      ตัวอย่างหน้าจอขนาด 600x502
      600x502_2.jpg
      600x502_2.jpg (32.35 KiB) เปิดดู 59 ครั้ง


      ตัวอย่างหน้าจอขนาด 1349x512
      1349x512_3.jpg
      1349x512_3.jpg (33.51 KiB) เปิดดู 59 ครั้ง


จากนั้นรูปภาพของเราก็รองรับทุกอุปกรณ์ทั้งหมดทุกขนาดทั้งหน้าเดสท็อป แท็บเล็ตและสมาทร์โฟน

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

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน