วันอาทิตย์, กุมภาพันธ์ 08, 2552

Css ทำภาพให้แลดูใหญ่ขึ้นอีกนิดนึง


ตามปกติ เวลาเราดูภาพในอัลบั้ม ทีละภาพ ทีละภาพ

เราจะดูได้เต็มที่ที่ขนาด 600 px (เพิ่งทราบว่า ขึ้นอยู่กะตีมด้วย บางตีมก็ดูได้ไม่ถึง600 px) ถ้าอยากจะดูใหญ่มากกว่านั้น ต้องกด zoom

แต่ในหลายๆครั้ง เราจะเห็นว่า หน้าจอเรา ยังเหลือที่ว่างซ้ายขวาตั้งเยอะ ภาพมันน่าจะใหญ่กว่านี้อีกนิดนึงเนอะ

ดังนั้น


--------------------------------------------------------------------------------------------------------------------
วิธีทำก็คือใส่โค้ดนี้ลงไปครับ

div#photoimgwrap img#photoimg {
width: 110% ! important;
height: auto ! important;
}


ภาพก็จะใหญ่ขึ้นตาม % ที่เราใส่ไป

--------------------------------------------------------------------------------------------------------------------

วิธีนำไปปรับใช้ 
ตัวเลขที่เราจะแก้ไขคือ บรรทัดนี้

width: 110% ! important;

ตอนแรกผมลองใส่ 700px   ผลที่ได้ภาพนอนแสดงเต็ม 700   แต่ภาพแนวตั้งจะสูงเกิน 700 ขึ้นไปอีก
ผมเลยลองมาใช้ปรับค่าเป็น % ผลที่ได้ ดูมีความแม่นยำกว่า  แต่ภาพจะเลื่อนไปชิดขวาเล็กน้อย (ยังหาทางพามากลางไม่สำเร็จ)


---------------------------------------------------------------------------------------------------------------------

ข้อดี ภาพขึ้นมาเต็มตาดีครับ
ข้อเสีย ภาพจะแตก เพราะขยายภาพจาก 600PX ขึ้นมา
และ กูเกิ้ลโครม เรียกภาพมาดูอาจไม่ขึ้นในบางครั้ง

---------------------------------------------------------------------------------------------------------------------

ที่มาของไอเดีย  เพื่อนกระแต มาจุดประกายความคิด
รวมถึงไปหาโค้ดมาจากที่นี่ครับ http://multiplydesign.multiply.com/notes/item/1012


22 ความคิดเห็น:

MookWariN SeanKla กล่าวว่า...

ขอบคุงคับจะลองดูจ้า

明 เม้ง  ^__^ กล่าวว่า...

: ) มีหนูมาทดลองแย้ว

The Grace กล่าวว่า...

ดีนะเนี่ยที่ม่ายช่ายหนูทดลอง อิ อิ แต่เป็นลิงทดลอง

明 เม้ง  ^__^ กล่าวว่า...

เจี๊ยกกกก

vee .. กล่าวว่า...

ขอบคุณครับ

明 เม้ง  ^__^ กล่าวว่า...

: )

phyche phyche123 กล่าวว่า...

ใหญ่ขึ้นนิสสสสสนึงจริงๆด้วย

明 เม้ง  ^__^ กล่าวว่า...

อิอิ

( * _ * ) . กล่าวว่า...

มิน่าหละ หน้าบ้านข้าพเจ้ากว้างไปเรื่อยไปเลยนิ

明 เม้ง  ^__^ กล่าวว่า...

เอ อันนี้ก็ไม่ทราบ

peter per กล่าวว่า...

อื่ม ทำให้รูปหน้าพี่เม้ง ดูใหญ่ขึ้นจริง ๆ ฮิ ๆ

.. Ong .. กล่าวว่า...

ขอบคุงคร่าาา

*~MoO aEa~* ™ กล่าวว่า...

สุดยอดเลย

明 เม้ง  ^__^ กล่าวว่า...

เฮ้ย ไม่เกี่ยวกะโค้ดแล้ว

MookWariN SeanKla กล่าวว่า...

อันนี้ใช่ป่าวพี่เม้งที่นั้มตามหา วะ5555


ขอบคุงคับ

เคยลองแล้วแต่มันไม่ใหญ่อ่า

明 เม้ง  ^__^ กล่าวว่า...

สงสัยจะช่ายฮะ

phyche phyche123 กล่าวว่า...

มันเล็กก่อนจะใหญ่ กว่าจะได้ดูอันใหญ่ เฮ้อๆ

明 เม้ง  ^__^ กล่าวว่า...

เอาออกไปแระ

phyche phyche123 กล่าวว่า...

ตามไปทดสอบบ

PaEgUS SoO กล่าวว่า...

ขอลองหน่อยครับ ฮุๆ ขอบคุณก๊าฟฟ

我 ... กล่าวว่า...

เดจาวู พลีส

kitipong bhalatanya กล่าวว่า...

ขอบคุณครับ