Bagaimana cara mempertahankan rasio aspek saat menskalakan gambar menggunakan satu dimensi (CSS) di IE6?

Inilah masalahnya. Saya memiliki gambar:

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

Perhatikan tidak ada tinggi atau lebar yang ditentukan.

Pada halaman tertentu saya hanya ingin menampilkan thumbnail. Saya tidak dapat mengubah html, jadi saya menggunakan CSS berikut:

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

Yang (di sebagian besar browser) membuat laman dengan gambar mini lebar yang seragam, semua dengan rasio aspek yang dipertahankan.

Di IE6, gambar hanya diskalakan dalam dimensi yang ditentukan dalam CSS. Itu mempertahankan ketinggian 'alami'.

Berikut adalah contoh dari sepasang halaman yang menggambarkan masalah tersebut:

• Daftar, yang seharusnya menampilkan thumbnail
• Satu entri blog, yang menampilkan gambar ukuran penuh.

Saya akan sangat berterima kasih atas semua saran, tetapi ingin menunjukkan bahwa (karena keterbatasan platform yang dipilih klien) saya mencari sesuatu yang tidak melibatkan modifikasi html. CSS juga lebih disukai daripada javascript.

EDIT: Harus disebutkan bahwa gambar memiliki ukuran dan rasio aspek yang berbeda.

Adam Luter memberi saya ide untuk ini, tetapi ternyata ternyata sangat sederhana:

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

IE6 sekarang menskalakan gambar dengan baik dan tampaknya inilah yang digunakan oleh semua browser lain secara default.

Terima kasih untuk kedua jawabannya!

Saya senang itu berhasil, jadi saya rasa Anda harus secara eksplisit mengatur 'otomatis' di IE6 agar bisa meniru browser lain!

Saya baru-baru ini menemukan teknik lain untuk menskalakan gambar, lagi-lagi dirancang untuk latar belakang. Teknik ini memiliki beberapa fitur menarik:

1. Rasio aspek gambar dipertahankan
2. Ukuran asli gambar dipertahankan (yaitu, gambar tidak akan pernah menyusut hanya tumbuh)

Markup bergantung pada elemen pembungkus:

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

Diberikan markup di atas, Anda kemudian menggunakan aturan ini:

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

Jika Anda kemudian mengontrol ukuran pembungkus Anda mendapatkan efek skala menarik yang saya cantumkan di atas.

Untuk lebih eksplisitnya, pertimbangkan status dasar berikut: Penampung berukuran 100x100 dan gambar 10x10. Hasilnya adalah gambar berskala 100x100.

1. Mulai dari status dasar, ukuran container diubah menjadi 20x100, gambar tetap diubah ukurannya pada 100x100.
2. Mulai dari keadaan dasar, gambar diubah menjadi 10x20, gambar diubah ukurannya menjadi 100x200.

Jadi, dengan kata lain, gambar selalu berukuran setidaknya sebesar container, tetapi akan menyesuaikan skalanya untuk mempertahankan rasio aspeknya.

Ini mungkin tidak berguna untuk situs Anda, dan tidak berfungsi di IE6. Tapi, ini berguna untuk mendapatkan latar belakang berskala untuk port tampilan atau penampung Anda.

Yah, saya bisa memikirkan hack CSS yang akan menyelesaikan masalah ini.

Anda dapat menambahkan baris berikut di file CSS Anda:

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

Kode di atas hanya akan dilihat oleh IE6. Rasio aspek tidak akan sempurna, tetapi Anda dapat membuatnya terlihat normal. Jika Anda benar-benar ingin membuatnya sempurna, Anda perlu menulis beberapa javascript yang akan membaca lebar gambar asli, dan mengatur rasio yang sesuai untuk menentukan tingginya.

Satu-satunya cara untuk melakukan penskalaan eksplisit di CSS adalah dengan menggunakan trik seperti yang ditemukan di sini .

Hanya IE6, Anda juga dapat menggunakan filter (lihat PNGFix ). Tetapi menerapkannya secara otomatis ke halaman akan membutuhkan javascript, meskipun javascript itu dapat disematkan di file CSS.

Jika Anda akan membutuhkan javascript, maka Anda mungkin ingin javascript mengisi nilai yang hilang untuk ketinggian dengan memeriksa gambar setelah konten dimuat. (Maaf saya tidak punya referensi untuk teknik ini).

Akhirnya, dan maafkan saya untuk kotak sabun ini, Anda mungkin ingin menghindari dukungan IE6 dalam masalah ini. Anda dapat menambahkan _width: autosetelah width: 75pxaturan Anda , sehingga IE6 setidaknya menampilkan gambar secara wajar, meskipun ukurannya salah.

Saya merekomendasikan solusi terakhir hanya karena IE6 sedang dalam proses keluar: 20% dan turun hampir satu persen sebulan . Juga, saya perhatikan bahwa situs Anda bersifat rekreasi dan di Inggris. Kedua hal ini membantu demografis cenderung menjauh dari IE6: penggunaan IE6 turun hampir 40% selama akhir pekan (tidak ada rujukan maaf), dan Inggris memiliki demografi IE6 yang jauh lebih rendah (sekali lagi tidak ada rujukan, maaf).

Semoga berhasil!