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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ
BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด
กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: วิธีปรับรูปภาพให้ย่อตามขนาดของหน้าจอ

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

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

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Booststap HTML css

ข้างบน