การปรับขนาดรูปภาพด้วย html php

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

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

aegmongkol
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 644
ลงทะเบียนเมื่อ: 02/08/2021 10:05 am

การปรับขนาดรูปภาพด้วย html php

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

การเขียนโค้ดในการทำโปรเจคใดโปรเจคหนึ่งเพื่อให้ได้ความสะดวกสบายแก่ผู้อ่าน หรือผู้ที่มาเข้าชมนั้นสิ่งที่จำเป็นอย่างนึงคือรูปภาพซึ่งการใส่รูปภาพเพียงอย่างเดียวนั้นในบางกรณีอาจทำให้ไม่สามารถได้รับงานที่ต้องการหรือขนาดของรูปภาพผิดไป จึงจำเป็นต้องมีการปรับขนาดซึ่งเราสามารถปรับขนาดของรูปภาพและ ปรับขนาดของตัวอักษรด้วยhtml โดยเราจะใช้ภาษา php และ html

การที่เราจะปรับขนาดของรูปภาพนั้นอันดับแรกเราต้องใส่รูปภาพลงไปอันดับแรก

สร้างไฟล์
สร้างไฟล์
1.JPG (5.61 KiB) Viewed 3349 times
1.ขั้นตอนแรกให้เราสร้างไฟล์ที่ใช้เขียนชื่อไฟล์อะไรก็ได้ในที่นี้จะตั้งว่า img.php


ทำการเพิ่มรูปภาพ

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="img/line.jpg" alt="">   
</body>
</html>
2.ให้เราทำการเปิดแท็ก html5 ในไฟล์ที่สร้างแล้วใช้คำสั่งในการใส่รูปภาพซึ่งรูปภาพจะต้องอยู่ในโฟลเดอร์เราและชื่อที่ใช้ต้องตรงกัน

ผลลัพธ์
ผลลัพธ์
2.JPG (11.08 KiB) Viewed 3349 times
3.ต่อไปให้ทำการแสดงผลลัพธ์ว่ารูปที่เราใส่ไปนั้นมีการเพิ่มเข้ามาหรือยัง ถ้ายังไม่มีการเพิ่มเข้ามาแสดงว่ามีการใส่ชื่อรูปผิด


การปรับขนาดรูป

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="img/line.jpg" height=500 alt="">   
</body>
</html>
4.ต่อมาจะเป็นการปรับขนาดรูปโดยใช้คำสั่ง height ตามด้วยเลขของขนาดที่ต้องการ

ผลลัพธ์
ผลลัพธ์
3.JPG (11.07 KiB) Viewed 3349 times
5.เมื่อเราทำการแสดงผลลัพธ์ที่ได้จะเห็นได้ว่ารูปที่แสดงนั้นมีขนาดใหญ่ขึ้นกว่ารูปก่อนหน้านี้




การปรับขนาดของรูปภาพนี้เป็นเพียงการปรับขนาดแบบง่ายสำหรับภาษา html ซึ่งการปรับขนาดนั้นมีหลายวิธีเช่น ที่นี่

อ้างอิง
http://www.thaiseoboard.com/index.php/topic,191000.0.html
https://www.youtube.com/watch?v=VA5HJayV0wU
https://mmo.zcongnghe.com/html-5-%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%9B%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%82%E0%B8%99%E0%B8%B2%E0%B8%94%E0%B8%A3%E0%B8%B9%E0%B8%9B%E0%B8%A0%E0%B8%B2%E0%B8%9E-%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1/
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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