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


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

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

Parichat
PHP VIP Members
PHP VIP Members
Posts: 4860
Joined: 08/01/2018 10:03 am

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

Post by Parichat » 06/06/2018 11:45 am

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

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

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

    Code: Select all

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

    Code: Select all

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

    Code: Select all

    <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 ให้กับรูปภาพดังโค้ด

    Code: Select all

    <img class="img-responsive" src="dachshund-1519374_960_720.jpg" border="0">
    
    รวมโค้ดทั้งหมด

    Code: Select all

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

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

Return to “Booststap Knowledge”

Users browsing this forum: No registered users and 2 guests