มาเรียน CSS กันเถอะ (แตกหน่อ)

ถ้าได้ดีแล้วเค้าจะถีบหัวส่งนะ จานบิ๊ก 

[มังกร]

  ม่ายยยยยยยยยยยยยยยยยยยยย

[มังกร]

CSS : แต่งกล่อง Facebook Like Box กัน

วิดีโอสอนพื้นฐานของ HTML CSS Javascript จาก Google

[CSS] tag ต่าง ๆ และ CSS ที่เกี่ยวกับ list

[มังกร]

อาชามบิ๊กขยันจริงๆ ทั้ง wordpress ทั้ง CSS 

[มังกร]

  เรื่องต่อนก็ขยันนะครับ

 

[มังกร]

[CSS] ข้อแตกต่างระหว่าง width:auto กับ width:100%

[CSS3] แนะนำเว็บที่มีตัวอย่างการเขียน CSS3 ให้นำไปใช้

[CSS] แนะนำ Slide ที่ควรดูเพื่อทำความเข้าใจกับ CSS

เรื่อง width นี่เพิ่งรู้
แสดงว่าเวลาใช้ ใช้ auto มันก็คือแสดงเป็นคุณสมบัติเดียวกะ div ธรรมดาเลยชิมิ

[มังกร]

ใช่ เพราะ div ปรกติ width จะเป็น auto อยู่แล้ว ไม่ใช่ 100%

แล้วถ้าเป็น img ล่ะ
คือกูจะให้มันแสดงผลเป็น responsive
แต่อยากกำหนดว่าถ้า div ที่ห่ออยู่กว้างกว่ารูป ก็ให้แสดงผลปกติ
แต่ถ้าขนาดเล็กกว่ารูปก็ให้ย่อให้พอดีๆ แบบนี้ต้องเขียนยังไง

(ดูใน fail.in.th ก็ได้ )

[มังกร]

ถ้าแบบนั้นมึงอาจจะเขียนว่า

div {
width:auto;
}
div img {
width:99%;
}

แบบนี้น่าจะได้นะ รูปจะได้ตาม div ตัวที่เป็นกรอบอะ

ทำไมข้างในต้องเป็น 99% อะ

[มังกร]

จะ 100% ก็ได้ กลัวจะเผื่อกรอบ เผื่ออะไรด้วย 

แล้วทำไมข้างในไม่ width:auto อะ

[มังกร]

ก็ด้านนอก width:auto เป็นกรอบ

ส่วนด้านในเป็น width:100% เพื่อจะได้เต็มกรอบ

[มังกร]

อ๋อ อีกอย่าง ถ้าตั้งเป็น width:auto ให้รูปใช่ปะ

สมมติกรอบกว้าง 250px รูปกว้าง 150px

รูปก็จะกว้าง 150px ถ้าเป็น width:auto

แต่ถ้าเป็น width:100% รูปก็จะกว้าง 250px ตามกรอบที่เรากำหนดอะ