เราจะเขียนโค้ด HTML อย่างไรให้รูป Jpeg มีขนาดพอดีกับหน้าจอผู้ใช้โดยไม่กำจัดขนาด

washiravit · 29 เมษายน 2011, 13:13:22

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

ขอบพระคุณเป็นอย่างสูงครับ

ayeweb · 29 เมษายน 2011, 13:14:33

เลือกเป็น % ครับ

washiravit · 29 เมษายน 2011, 13:25:28

อ้างถึงจาก: ayeweb ใน 29 เมษายน 2011, 13:14:33
เลือกเป็น % ครับ

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

ayeweb · 29 เมษายน 2011, 13:30:11

width="100%" height="100%"
แทนการใส่ขนาดเดิมครับ

nanjaow · 29 เมษายน 2011, 13:30:28

อ้างถึงจาก: washiravit ใน 29 เมษายน 2011, 13:25:28
อ้างถึงจาก: ayeweb ใน 29 เมษายน 2011, 13:14:33
เลือกเป็น % ครับ

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

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

washiravit · 29 เมษายน 2011, 13:35:20

อ้างถึงจาก: nanjaow ใน 29 เมษายน 2011, 13:30:28
อ้างถึงจาก: washiravit ใน 29 เมษายน 2011, 13:25:28
อ้างถึงจาก: ayeweb ใน 29 เมษายน 2011, 13:14:33
เลือกเป็น % ครับ

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

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

หมายถึงตอนทำใน dreamweaver ใช่ไหมครับ
พอดีเคยใช้แต่ Web Page Maker เลยไม่ค่อยเข้าใจ
แสดงว่าถ้าทำเสร็จ ให้แก้ไขใน Notepad จาก Px เป็น เปอร์เซ็น

gam_55 · 29 เมษายน 2011, 13:43:21

อ้างถึงจาก: ayeweb ใน 29 เมษายน 2011, 13:30:11
width="100%" height="100%"
แทนการใส่ขนาดเดิมครับ

ตามนี้ค่ะ

mSkyline · 29 เมษายน 2011, 14:02:33

body{brackgound:#000000; url(...) top center;width:100%; margin:0 auto;}

ประมาณมั้ง

navico · 29 เมษายน 2011, 14:13:02

smapan · 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>

deadclosed · 29 เมษายน 2011, 14:28:02

ตามข้างบนบอกครับหลักๆอยู่ที่
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;

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

washiravit · 29 เมษายน 2011, 15:19:21

คือผมต้องการทำรูป Jpeg ให้เต็มหน้าแรก และสามารถคลิ้๊กที่ภาพ Jpeg นั้นเพื่อเป็นลิ้งคไปหน้าถัดไปได้ครับ
เท่าที่อ่านแล้วแก้ไขแค่ Px เป็น เปอร์เซ็นก็น่าได้ ขอเทสก่อนนะครับ

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 ครับ

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

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

esanza.com · 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 ครับ

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

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

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

โค้ด เลือก

class="img-responsive"

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

BOS · 21 กันยายน 2017, 18:33:08

ยัด css inline ไปเลยครับ ที่เดียวจบ

<a href="#">
<img src="img.jpg" style="display:block;width:100%;height:auto;">
</a>

upperyou · 21 กันยายน 2017, 20:11:25

ขอบคุณครับ

nukerman · 25 กันยายน 2017, 13:35:04

เมื่อ 6 ปีที่แล้ว จขกท คงหาวิธีได้แล้วมั้งครับ