การทำลิสต์รูปภาพขนาดย่อ โดยที่ไม่มีเครื่องมือย่อขนาด ด้วย css

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

ตัวอย่างการเขียนลิสต์รูปภาพ

จริงๆ แล้วมันไม่มีอะไรมากเลย ในเรื่องที่ผมเขียนในตอนนี้

ปัญหา

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

แต่โลกมันไม่ได้สวยงามอย่างนั้น เมื่อเราไม่มี Function การย่อ ขยาย หรือ Crop รูปภาพก่อนนำขึ้นไปบน Server เพื่อเอาไปแสดงผลทางหน้าเว็บ เรา เหล่า CSS Designer ต้องหาทางแก้ไขเอาเอง

โดยวิธีการเขียน CSS แบบที่ผมจะนำเสนอนี้ ก่อนหน้านี้ ผมคิดว่ามันมีความน่าจะเป็น แต่ยังไม่ได้ลงมือทำดูแค่นั้นเอง เพียงแค่คิดดูเล่นๆ วันนี้เลยลองเขียนดูว่ามันจะใช้ได้หรือเปล่า ปรากฎว่า มันใช้ได้ ก็เลยเอามาบอกไว้ก่อน เดี๋ยวลืม (ผมยังไม่เคยเอาไปใช้ที่ไหนนะครับ เพิ่งลองเขียนดูวันนี้แหละ)

คำถาม จากปัญหา

ถ้าผมต้องการทำรูปขนาดย่อ ขนาด 50×50 pixel เอามาเรียงกัน แถวละ 5 รูป ทั้งหมด 2 แถว และปัญหาที่มีคือ รูปที่ผมมีนั้น มันมีความกว้าง ยาว แนวตั้ง นอน ไม่เหมือนกันเลย ผมจะทำยังไง

สมมุติฐาน

ใน Properties ของ CSS มันมีคำสั่งอะไรที่เราสามารถนำมาใช้ได้บ้าง ในกรณีนี้คือ

  1. max-width สำหรับกำหนดความกว้างสูงสุดของรูปภาพ
  2. overflow สำหรับซ่อนส่วนที่เกินออกไป
  3. display สำหรับกำหนดให้ Element <a> กลายเป็นอื่น
  4. width และ height สำหรับ กำหนดความกว้าง ความสูงจำกัดของ <a>
  5. ค่าพื้นฐานของ Element อื่นๆ ทั่วไป

ผมนั่งคิดไปก่อนว่า ถ้าผมจับ <li> มากำหนดความกว้าง แล้วก็ float left มันก็จะได้ <li> ที่มีขนาดความกว้างเท่าๆ กัน แล้วเรียงกันอย่างที่ผมต้องการ
หลังจากนั้น ผมก็นำเอา <a> มาใส่ใน <li> กำหนดให้ <a> แสดงผลเป็น block ก่อน เพื่อที่จะกำหนดความกว้างและสูงให้กับ <a> ได้ หลังจากนั้น ก็ กำหนด overflow เป็น hidden หรือ
การซ่อนส่วนที่เกินจากกรอบของเนื้อหาออกไปนั่นเอง

ขั้นต่อไปก็นำรูปภาพมาใส่ แล้วก็กำหนด max-width ให้กับรูปภาพ ซึ่งในที่นี้ก็คือ ไม่ให้เกิน 50px

แค่นี้มันก็น่าจะใช้ได้ ในความคิดของผม

ลงมือทำ

ผมทำตามขั้นตอนอย่างที่ผมคิดทุกอย่าง แล้วมันก็เจอปัญหา "คิดพบหรือยังครับ ว่ามันจะเกิดอะไรขึ้น"

Code CSS

 
 	body>h1:first-child+ul {
                width: 280px;
            }
            body>h1:first-child+ul:after {
                content: " ";
                display: block;
                clear: both;
            }
            body>h1:first-child+ul>li {
                width: 50px;
                float: left;
                margin-left: 5px;
                margin-bottom: 5px;
            }
            body>h1:first-child+ul>li>a {
                display: block;
                width: 50px;
                height: 50px;
                overflow: hidden;
                border: solid 1px #fff;
            }
            body>h1:first-child+ul>li>a:hover {
                border: solid 1px #ff9900;
			}
            body>h1:first-child+ul>li>a>img {
                max-width: 70px;
                min-width: 50px;
                min-height: 50px;
            }
 
 

Code HTML

 
 	  <body>
      <h1>การทำลิสต์ รูปภาพขนาดย่อให้เรียงเท่ากัน</h1>
      <ul>
          <li><a href="#"><img src="sky.png" alt="ท้องฟ้า" /></a></li>
          <li><a href="#"><img src="sky2.png" alt="ท้องฟ้า" /></a></li>
          <li><a href="#"><img src="feel.png" alt="ริมคลอง" /></a></li>
          <li><a href="#"><img src="cows.png" alt="วัว" /></a></li>
          <li><a href="#"><img src="feel2.png" alt="ดวงอาทิตย์ตกดิน" /></a></li>

<li><a href="#"><img src="flower1.png" alt="ดอกไม้" /></a></li> <li><a href="#"><img src="flower2.png" alt="ดอกไม้" /></a></li> <li><a href="#"><img src="flower3.png" alt="ริมคลอง" /></a></li> <li><a href="#"><img src="sunset.png" alt="ดวงอาทิตย์ตกดิน" /></a></li> <li><a href="#"><img src="night.png" alt="ค่ำคืน" /></a></li> </ul> </body>

ผ่าง!!!

รูปภาพที่เป็นแนวนอนมันดันมีความสูงไม่ครบตาม 50px อย่างที่ผม "คิดพบ" ตั้งแต่แรก ประมาณว่า "คิดไม่พบ กันเลยทีเดียว" ลองดูกันตามแนวคิดตัวอย่างที่ผมของวาดๆ ออกมาให้ดูครับ

ตัวอย่างการ crop รูป

เมื่อเกิดปัญหา ตามประสาคน หื่นกาม โรคจิต คิดมาก อย่างผม ก็จินตนาการต่อไปว่า จะต้องแก้ปัญหายังไงได้บ้าง

ตามหลักคณิตสาสตร์ ป.1 เลยครับ

ภาพมันมีขนาด 4:3 ถ้าเราย่อแนวนอนลงมา ดากมันขาดชัวร์ เพราะฉะนั้น เราต้องการรูป 50×50 ถ้าไม่ต้องการให้ดากมันน้อยกว่า 50 ก็ อย่ากำหนดความกว้างให้มันเท่ากับ 50 ซึ่ง ต้องกำหนดให้มันมากกว่านั้น มากพอที่จะ ทำให้ดากมันเท่ากับ 50 หรือมากกว่า เพื่อที่จะเป็น 50×50 ได้อย่างสวยงาม
ผมก็เลยลองกำหนดให้รูปภาพให้เป็น 70px ซึ่ง มันก็ ใช้ได้เลยทีเดียว

ดูตัวอย่าง การทำลิสต์รูปภาพขนาดย่อ ทางนี้ครับ

แนะนำให้ลอง ปลด CSS ออกดูก็ได้ครับ จะเห็นว่า รูปภาพมันมีขนาดไม่เท่ากันอย่างไรบ้าง

บทสรุปและข้อกังวลอื่นๆ ที่จะตามมา

  1. ภาพขนาด 4:3 จะสามารถใช้ได้ดีในลักษณะนี้
  2. ถ้าเป็น 21:9 ต้องกำหนด max-width ให้ได้ตามสัดส่วน (อันนี้ลองไปทำกันเอาเองนะครับ)
  3. ภาพที่ได้มา จะเอามาได้แค่มุมซ้ายบนของรูปเท่านั้น ซึ่งมันจะไม่ค่อยโสภาเท่าไหร่ แต่มันแก้ปัญหาข้างต้นที่ผมกล่าวมาตอนเริ่มบทความได้ ก็เป็นอันตามนั้น
  4. ถ้ามีวิธีอื่นที่ดีกว่า จงทำครับ

มีความสุขกับการใช้ชีวิตครับ

Back to Top

7 Responses to การทำลิสต์รูปภาพขนาดย่อ โดยที่ไม่มีเครื่องมือย่อขนาด ด้วย css

Leave a Reply to จง Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top