ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingเราจะเขียนโค้ด HTML อย่างไรให้รูป Jpeg มีขนาดพอดีกับหน้าจอผู้ใช้โดยไม่กำจัดขนาด
« หน้าที่แล้ว ต่อไป »
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: เราจะเขียนโค้ด HTML อย่างไรให้รูป Jpeg มีขนาดพอดีกับหน้าจอผู้ใช้โดยไม่กำจัดขนาด  (อ่าน 60518 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
washiravit
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 525
ออฟไลน์ ออฟไลน์

กระทู้: 2,501



ดูรายละเอียด
« เมื่อ: 29 เมษายน 2011, 13:13:22 »
เราจะเขียนโค้ด HTML อย่างไรให้รูป Jpeg มีขนาดพอดีกับหน้าจอผู้ใช้โดยไม่กำจัดขนาดครับ
อย่างเช่นในเว็บ http://www.transformersmovie.com/ จะเห็นได้ว่าเขาใช้ Flash ในการทำหน้าแรก
ผมทดลองดูแล้ว ไม่ว่าเปิดกับจอไวสกรีนหรือจอมอนิเตอร์ของ PC รุ่นเก่าๆ
มันก็ยังสามารถปรับขนาดให้เท่ากับหน้าจอของผู้ใช้ได้อย่างอัตโนมัติ
ทีนี้ผมอยากทำเป็นรูป jpeg ครับ ไม่ทราบว่าเราจะมีวิธีอย่างไร
ที่จะทำให้เราสามารถสร้างรูปขึ้นมาเป็นหน้าแรก
และให้รูปนั้นสามารถขยายหรือลดขนาดให้ฟิตหน้าจอของผู้ใช้ได้โดยอัตโนมัติ
โดยที่ไม่ล้นออกไปจนต้องเลื่อนสกอร์บาร์ซ้ายขวาเพื่อดูรูปให้เต็มใบครับ

ขอบพระคุณเป็นอย่างสูงครับ
บันทึกการเข้า
http://www.vittarot.com
http://www.facebook.com/vittarot
http://www.Startyourway.com
https://www.facebook.com/startyourwaybyvit
ayeweb
Verified Seller
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 321
ออฟไลน์ ออฟไลน์

กระทู้: 5,205



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 29 เมษายน 2011, 13:14:33 »
เลือกเป็น % ครับ
บันทึกการเข้า

ข่าวไอที ข่าวสารไอที แอพไอโฟน บริการอื่นๆ
บริการ ตรวจหวย อื่นๆ ทั่วไปสาระน่ารู้ ความรู้ต่างๆ
Host ไทย เว็บผู้หญิงนะคะ แต่ผู้ชายก็เข้าได้ค่ะ
ตรวจหวย
ตรวจหวย ผลสลากกินแบ่งรัฐบาล>>
เช่าโฮสติ้ง Ruk-com
washiravit
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 525
ออฟไลน์ ออฟไลน์

กระทู้: 2,501



ดูรายละเอียด
« ตอบ #2 เมื่อ: 29 เมษายน 2011, 13:25:28 »
อ้างจาก: ayeweb ที่ 29 เมษายน 2011, 13:14:33
เลือกเป็น % ครับ

Huh?Huh?Huh?Huh?Huh?
เลือกอะไรหรือครับ
บันทึกการเข้า
http://www.vittarot.com
http://www.facebook.com/vittarot
http://www.Startyourway.com
https://www.facebook.com/startyourwaybyvit
ayeweb
Verified Seller
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 321
ออฟไลน์ ออฟไลน์

กระทู้: 5,205



ดูรายละเอียด เว็บไซต์
« ตอบ #3 เมื่อ: 29 เมษายน 2011, 13:30:11 »
width="100%" height="100%"
แทนการใส่ขนาดเดิมครับ
บันทึกการเข้า

ข่าวไอที ข่าวสารไอที แอพไอโฟน บริการอื่นๆ
บริการ ตรวจหวย อื่นๆ ทั่วไปสาระน่ารู้ ความรู้ต่างๆ
Host ไทย เว็บผู้หญิงนะคะ แต่ผู้ชายก็เข้าได้ค่ะ
ตรวจหวย
ตรวจหวย ผลสลากกินแบ่งรัฐบาล>>
เช่าโฮสติ้ง Ruk-com
nanjaow
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 353
ออฟไลน์ ออฟไลน์

กระทู้: 1,325



ดูรายละเอียด
« ตอบ #4 เมื่อ: 29 เมษายน 2011, 13:30:28 »
อ้างจาก: washiravit ที่ 29 เมษายน 2011, 13:25:28
อ้างจาก: ayeweb ที่ 29 เมษายน 2011, 13:14:33
เลือกเป็น % ครับ

Huh?Huh?Huh?Huh?Huh?
เลือกอะไรหรือครับ

น่าจะตอนกำหนดขนาด หน่ะคะแทนที่จะใช้หน่วยเป็น px ก็เป็นเป็น %  แทน งงป่าวคะ
บันทึกการเข้า
washiravit
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 525
ออฟไลน์ ออฟไลน์

กระทู้: 2,501



ดูรายละเอียด
« ตอบ #5 เมื่อ: 29 เมษายน 2011, 13:35:20 »
อ้างจาก: nanjaow ที่ 29 เมษายน 2011, 13:30:28
อ้างจาก: washiravit ที่ 29 เมษายน 2011, 13:25:28
อ้างจาก: ayeweb ที่ 29 เมษายน 2011, 13:14:33
เลือกเป็น % ครับ

Huh?Huh?Huh?Huh?Huh?
เลือกอะไรหรือครับ

น่าจะตอนกำหนดขนาด หน่ะคะแทนที่จะใช้หน่วยเป็น px ก็เป็นเป็น %  แทน งงป่าวคะ

หมายถึงตอนทำใน dreamweaver ใช่ไหมครับ
พอดีเคยใช้แต่ Web Page Maker เลยไม่ค่อยเข้าใจ
แสดงว่าถ้าทำเสร็จ ให้แก้ไขใน Notepad จาก Px เป็น เปอร์เซ็น
บันทึกการเข้า
http://www.vittarot.com
http://www.facebook.com/vittarot
http://www.Startyourway.com
https://www.facebook.com/startyourwaybyvit
gam_55
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 319
ออฟไลน์ ออฟไลน์

กระทู้: 1,203



ดูรายละเอียด
« ตอบ #6 เมื่อ: 29 เมษายน 2011, 13:43:21 »
อ้างจาก: ayeweb ที่ 29 เมษายน 2011, 13:30:11
width="100%" height="100%"
แทนการใส่ขนาดเดิมครับ

ตามนี้ค่ะ
บันทึกการเข้า
รับทำเว็บไซต์
mSkyline
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 131
ออฟไลน์ ออฟไลน์

กระทู้: 1,472



ดูรายละเอียด
« ตอบ #7 เมื่อ: 29 เมษายน 2011, 14:02:33 »
body{brackgound:#000000; url(...) top center;width:100%; margin:0 auto;}

ประมาณมั้ง
บันทึกการเข้า
AnyWhereToThai รับขนสินค้าจาก US UK JP KR CN กลับไทย
https://www.facebook.com/AnyWhereToThai
navico
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 108
ออฟไลน์ ออฟไลน์

กระทู้: 2,315



ดูรายละเอียด เว็บไซต์
« ตอบ #8 เมื่อ: 29 เมษายน 2011, 14:13:02 »
<img src="img.jpg" width="100%" height="100%"/>
บันทึกการเข้า
smapan
Global Moderator
เจ้าพ่อบอร์ดเสียว
*****

พลังน้ำใจ: 643
ออฟไลน์ ออฟไลน์

กระทู้: 8,272



ดูรายละเอียด เว็บไซต์
« ตอบ #9 เมื่อ: 29 เมษายน 2011, 14:23:37 »
CSS

โค๊ด:
html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

#wrapper {
  position: relative;
  width: 800px;
  min-height: 400px;
  margin: 100px auto;
  color: #333;
}
XHTML

โค๊ด:
<body>
  <img alt="full screen background image" src="/background.jpg" id="full-screen-background-image">
  <div id="wrapper">
    <p>Content goes here...</p>
  </div>
</body>
บันทึกการเข้า
จูมล่าโฮส สยามโฮสเว็บ modty.com
รวมที่พัก เช่ารายวัน ที่พักเช่ารายเดือนมากที่สุดแจ่มจริง
***Tel 083-757-1515 ติดปัญหา Joomla ตรงไหนรับปรึกษาฟรี โทรมาเถอะครับ ถ้าตอบได้ช่วยแน่นอน ไม่มีกั้ก. ***
deadclosed
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 133
ออฟไลน์ ออฟไลน์

กระทู้: 1,553



ดูรายละเอียด เว็บไซต์
« ตอบ #10 เมื่อ: 29 เมษายน 2011, 14:28:02 »
ตามข้างบนบอกครับหลักๆอยู่ที่
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;

ลองย่อขนาดหน้าเว็บดูจะเห็นคำตอบ เค้าเซ็ทพื้นหลังให้อยู่ตรงกลางคือมุมหลบสายตาเอาสีที่กลมกลืนมาทำให้ดูเป็นภาพใหญ๋ครับ  wanwan017
บันทึกการเข้า
washiravit
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 525
ออฟไลน์ ออฟไลน์

กระทู้: 2,501



ดูรายละเอียด
« ตอบ #11 เมื่อ: 29 เมษายน 2011, 15:19:21 »
คือผมต้องการทำรูป Jpeg ให้เต็มหน้าแรก และสามารถคลิ้๊กที่ภาพ Jpeg นั้นเพื่อเป็นลิ้งคไปหน้าถัดไปได้ครับ
เท่าที่อ่านแล้วแก้ไขแค่ Px เป็น เปอร์เซ็นก็น่าได้ ขอเทสก่อนนะครับ
บันทึกการเข้า
http://www.vittarot.com
http://www.facebook.com/vittarot
http://www.Startyourway.com
https://www.facebook.com/startyourwaybyvit
jommann
สมุนแก๊งเสียว
*

พลังน้ำใจ: 34
ออฟไลน์ ออฟไลน์

กระทู้: 676



ดูรายละเอียด เว็บไซต์
« ตอบ #12 เมื่อ: 21 กันยายน 2017, 15:00:10 »
ในส่วนของรูปภาพที่จะให้ ขยายเต็มหน้าจอ ทุก ขนาด เราต้องอย่าลืม ใส่ meta tag ไว้ใน tag <head> ครับ ด้วย

<meta name="viewport" content="width=device-width, initial-scale=1.0">

เพื่อเป็นการแจ้งให้ html รู้ว่าเราจะมีการ ทำเว็บที่เป็นแบบ รองรับทุก device ครับ หรือเรียกอีกอย่าง การทำ responsive ครับ

กำหนด ขนาด width height ให้เป็น % แทน px ครับ

//ไม่รู้ว่า จัดการได้รึยัง กระทู้ผ่านมา หลายวันแล้วเหมือนกัน  Tongue

link exam : hxxps://www.w3schools.com/css/css_rwd_images.asp
« แก้ไขครั้งสุดท้าย: 21 กันยายน 2017, 15:01:33 โดย jommann » บันทึกการเข้า
Domain 50 บาทต่อโดเมน
มาเปลี่ยนคลิกให้เป็นเงินกับ Neobux
thaiadpoint หาเงินออนไลน์
หาเงินออนไลน์
esanza.com
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 270
ออฟไลน์ ออฟไลน์

กระทู้: 3,673



ดูรายละเอียด
« ตอบ #13 เมื่อ: 21 กันยายน 2017, 15:25:51 »
อ้างจาก: jommann ที่ 21 กันยายน 2017, 15:00:10
ในส่วนของรูปภาพที่จะให้ ขยายเต็มหน้าจอ ทุก ขนาด เราต้องอย่าลืม ใส่ meta tag ไว้ใน tag <head> ครับ ด้วย

<meta name="viewport" content="width=device-width, initial-scale=1.0">

เพื่อเป็นการแจ้งให้ html รู้ว่าเราจะมีการ ทำเว็บที่เป็นแบบ รองรับทุก device ครับ หรือเรียกอีกอย่าง การทำ responsive ครับ

กำหนด ขนาด width height ให้เป็น % แทน px ครับ

//ไม่รู้ว่า จัดการได้รึยัง กระทู้ผ่านมา หลายวันแล้วเหมือนกัน  Tongue

link exam : hxxps://www.w3schools.com/css/css_rwd_images.asp

ผมแนะนำว่าใช้ Bootstrap Class เดียวจบครับ

 
โค๊ด:
class="img-responsive"

Bootstrap CSS Images Reference >> https://www.w3schools.com/boot...p/bootstrap_ref_css_images.asp

บันทึกการเข้า
ใครต้องการเช่าโฮสที่มี Control Panel ดีๆ
และ Support ดี แนะนำ => โฮสอะตอม
BOS
ก๊วนเสียว
*

พลังน้ำใจ: 33
ออฟไลน์ ออฟไลน์

กระทู้: 459



ดูรายละเอียด เว็บไซต์
« ตอบ #14 เมื่อ: 21 กันยายน 2017, 18:33:08 »
ยัด css inline ไปเลยครับ ที่เดียวจบ

<a href="#">
  <img src="img.jpg" style="display:block;width:100%;height:auto;">
</a>
บันทึกการเข้า
chordkub
upperyou
คนรักเสียว
*

พลังน้ำใจ: 1
ออฟไลน์ ออฟไลน์

กระทู้: 109



ดูรายละเอียด
« ตอบ #15 เมื่อ: 21 กันยายน 2017, 20:11:25 »
ขอบคุณครับ
บันทึกการเข้า
รับทำ Line OA -Line Official Account รับทำ Line My Shop รับริชเมนูไลน์ Oa Rich Menu servicemarketingspace.com
nukerman
Newbie
*

พลังน้ำใจ: 4
ออฟไลน์ ออฟไลน์

กระทู้: 94



ดูรายละเอียด
« ตอบ #16 เมื่อ: 25 กันยายน 2017, 13:35:04 »
เมื่อ 6 ปีที่แล้ว จขกท คงหาวิธีได้แล้วมั้งครับ
บันทึกการเข้า
หน้า: [1]   ขึ้นบน
พิมพ์
« หน้าที่แล้ว ต่อไป »
กระโดดไป: