จะรักษาอัตราส่วนภาพเมื่อปรับขนาดภาพโดยใช้มิติข้อมูลเดียว (CSS) ใน IE6 ได้อย่างไร

นี่คือปัญหา ฉันมีภาพ:

<img alt="alttext" src="filename.jpg"/>

หมายเหตุไม่ได้ระบุความสูงหรือความกว้าง

ในบางหน้าฉันต้องการแสดงเฉพาะภาพขนาดย่อ ฉันไม่สามารถแก้ไข html ได้ดังนั้นฉันจึงใช้ CSS ต่อไปนี้:

.blog_list div.postbody img { width:75px; }

ซึ่ง (ในเบราว์เซอร์ส่วนใหญ่) จะสร้างหน้าของภาพขนาดย่อที่มีความกว้างเท่ากันทั้งหมดนี้มีอัตราส่วนภาพที่คงไว้

แม้ว่าใน IE6 รูปภาพจะถูกปรับขนาดตามขนาดที่ระบุใน CSS เท่านั้น ยังคงความสูงตามธรรมชาติ

นี่คือตัวอย่างของหน้าคู่ที่แสดงปัญหา:

• รายการซึ่งควรแสดงภาพขนาดย่อ
• บล็อกโพสต์เดียวซึ่งแสดงภาพขนาดเต็ม

ฉันรู้สึกขอบคุณมากสำหรับคำแนะนำทั้งหมด แต่อยากจะชี้ให้เห็นว่า (เนื่องจากข้อ จำกัด ของแพลตฟอร์มที่ลูกค้าเลือก) ฉันกำลังมองหาสิ่งที่ไม่เกี่ยวข้องกับการแก้ไข html CSS ก็นิยมใช้กับจาวาสคริปต์เช่นกัน

แก้ไข: ควรระบุว่ารูปภาพมีขนาดและอัตราส่วนต่างกัน

Adam Luter ให้แนวคิดนี้แก่ฉัน แต่จริงๆแล้วมันง่ายมาก:

img {
  width:  75px;
  height: auto;
}

ตอนนี้ IE6 ปรับขนาดภาพได้ดีและดูเหมือนว่าจะเป็นสิ่งที่เบราว์เซอร์อื่น ๆ ใช้เป็นค่าเริ่มต้น

ขอบคุณสำหรับทั้งสองคำตอบ!

ฉันดีใจที่ได้ผลดังนั้นฉันเดาว่าคุณต้องตั้งค่า 'อัตโนมัติ' บน IE6 อย่างชัดเจนเพื่อให้มันเลียนแบบเบราว์เซอร์อื่น ๆ !

เมื่อเร็ว ๆ นี้ฉันพบเทคนิคอื่นสำหรับการปรับขนาดภาพซึ่งออกแบบมาสำหรับพื้นหลัง เทคนิคนี้มีคุณสมบัติที่น่าสนใจ:

1. อัตราส่วนภาพจะถูกรักษาไว้
2. ขนาดดั้งเดิมของภาพจะยังคงอยู่ (นั่นคือไม่สามารถย่อขนาดได้ แต่ขยายใหญ่ขึ้น)

มาร์กอัปอาศัยองค์ประกอบ Wrapper:

<div id="wrap"><img src="test.png" /></div>

จากมาร์กอัปข้างต้นคุณใช้กฎเหล่านี้:

#wrap {
  height: 100px;
  width: 100px;
}
#wrap img {
  min-height: 100%;
  min-width: 100%;
}

หากคุณควบคุมขนาดของกระดาษห่อคุณจะได้เอฟเฟกต์สเกลที่น่าสนใจที่ฉันระบุไว้ด้านบน

เพื่อให้ชัดเจนให้พิจารณาสถานะพื้นฐานต่อไปนี้คอนเทนเนอร์ที่มีขนาด 100x100 และรูปภาพที่มีขนาด 10x10 ผลลัพธ์ที่ได้คือภาพขนาด 100x100

1. เริ่มต้นที่สถานะพื้นฐานคอนเทนเนอร์จะปรับขนาดเป็น 20x100 รูปภาพจะยังคงปรับขนาดอยู่ที่ 100x100
2. เริ่มต้นที่สถานะพื้นฐานรูปภาพจะเปลี่ยนเป็น 10x20 รูปภาพจะปรับขนาดเป็น 100x200

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

สิ่งนี้อาจไม่มีประโยชน์สำหรับไซต์ของคุณและใช้ไม่ได้ใน IE6 แต่จะมีประโยชน์ในการปรับขนาดพื้นหลังสำหรับพอร์ตมุมมองหรือคอนเทนเนอร์ของคุณ

ฉันนึกถึงการแฮ็ก CSS ที่จะแก้ไขปัญหานี้ได้

คุณสามารถเพิ่มบรรทัดต่อไปนี้ในไฟล์ CSS ของคุณ:

* html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; } 

IE6 จะเห็นโค้ดด้านบนเท่านั้น อัตราส่วนภาพจะไม่สมบูรณ์แบบ แต่คุณสามารถทำให้มันดูปกติได้ หากคุณต้องการทำให้สมบูรณ์แบบจริงๆคุณจะต้องเขียนจาวาสคริปต์ที่จะอ่านความกว้างของภาพต้นฉบับและกำหนดอัตราส่วนให้เหมาะสมเพื่อระบุความสูง

วิธีเดียวในการปรับขนาดอย่างชัดเจนใน CSS คือใช้เทคนิคต่างๆเช่นที่พบที่นี่ที่นี่

IE6 เท่านั้นคุณยังสามารถใช้ตัวกรอง (ดูPNGFix ) แต่การนำไปใช้โดยอัตโนมัติกับหน้านั้นจะต้องใช้จาวาสคริปต์แม้ว่าจาวาสคริปต์นั้นสามารถฝังอยู่ในไฟล์ CSS ได้

หากคุณต้องการใช้จาวาสคริปต์คุณอาจต้องการเพียงแค่ให้จาวาสคริปต์กรอกค่าที่ขาดหายไปสำหรับความสูงโดยการตรวจสอบรูปภาพเมื่อโหลดเนื้อหาแล้ว (ขออภัยฉันไม่มีข้อมูลอ้างอิงสำหรับเทคนิคนี้)

สุดท้ายนี้และให้อภัยฉันสำหรับ soapbox นี้คุณอาจต้องการหลีกเลี่ยงการสนับสนุน IE6 ในเรื่องนี้ คุณสามารถเพิ่ม_width: autoหลังwidth: 75pxกฎของคุณเพื่อให้อย่างน้อย IE6 แสดงภาพอย่างสมเหตุสมผลแม้ว่าจะมีขนาดที่ไม่ถูกต้องก็ตาม

ฉันขอแนะนำวิธีแก้ปัญหาสุดท้ายเพียงเพราะ IE6 กำลังจะออก: 20% และลดลงเกือบร้อยละต่อเดือนร้อยละเดือนนอกจากนี้ฉันทราบว่าไซต์ของคุณเป็นสถานที่พักผ่อนหย่อนใจและอยู่ในสหราชอาณาจักร ทั้งสองอย่างนี้ช่วยให้กลุ่มประชากรเอนเอียงห่างจาก IE6: การใช้งาน IE6 ลดลงเกือบ 40% ในช่วงสุดสัปดาห์ (ไม่มีการอ้างอิงขออภัย) และสหราชอาณาจักรมีประชากร IE6 ที่ต่ำกว่ามาก (ไม่มีการอ้างอิงอีกแล้วขออภัย)

โชคดี!