วิธีเปลี่ยนรูปทรงของรูปภาพในหน้าเว็บโดยใช้ Bootstrap

ตอบกระทู้


คำถามนี้ เพื่อป้องกันการส่งแบบอัตโนมัติจากสแปมบอท
รูปแสดงอารมณ์
: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] เปิด
[flash] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: วิธีเปลี่ยนรูปทรงของรูปภาพในหน้าเว็บโดยใช้ Bootstrap

วิธีเปลี่ยนรูปทรงของรูปภาพในหน้าเว็บโดยใช้ Bootstrap

โพสต์ โดย tai14 » 23/08/2018 1:53 pm

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

1.copy ภาพที่ต้องการใช้จากโฟลเดอร์
180823130452-Z224.jpg
180823130452-Z224.jpg (28 KiB) เปิดดู 1942 ครั้ง


2.วางภาพลงในโฟลเดอร์ img
180823131541-6134.jpg
180823131541-6134.jpg (14.3 KiB) เปิดดู 1942 ครั้ง

จะได้ไฟล์มาอยู่ในโฟลเดอร์ img
180823131519-dDU4.jpg
180823131519-dDU4.jpg (14.54 KiB) เปิดดู 1942 ครั้ง


3.ใส่ภาพที่มีรูปทรงต้นฉบับเดิม ให้ลากไฟล์ภาพมาใส่ภายในโค้ดส่วนของ <body>

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

 <img src="img/f.jpg" alt=""/>

180823131447-BWHQ.jpg
180823131447-BWHQ.jpg (13.9 KiB) เปิดดู 1942 ครั้ง


4.ใส่ภาพที่มีรูปทรงสี่เหลี่ยมและขอบมนให้ใส่โค้ดด้านล่างนี้

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

<img src="img/f.jpg" class="img-rounded" alt=""/>

180823130543-536M.jpg
180823130543-536M.jpg (19.61 KiB) เปิดดู 1942 ครั้ง


5.ใส่ภาพที่มีรูปทรงวงรีให้ใส่โค้ดด้านล่างนี้

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

<img src="img/f.jpg" class="img-circle" alt=""/>

180823130514-4Cx7.jpg
180823130514-4Cx7.jpg (21.27 KiB) เปิดดู 1942 ครั้ง


ุ6.ใส่ภาพที่มีรูปทรงสี่เหลี่ยมแต่มีขอบสีขาวคล้ายภาพโพลารอยด์ให้ใส่โค้ดด้านล่างนี้

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

<img src="img/f.jpg" class="img-polaroid" alt=""/>

180823131616-b614.jpg
180823131616-b614.jpg (14.4 KiB) เปิดดู 1942 ครั้ง

ข้างบน