Як зберегти співвідношення сторін при масштабуванні зображення за допомогою одного (CSS) виміру в IE6?

Ось проблема. У мене є зображення:

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

Зверніть увагу, що висота та ширина не вказані.

На певних сторінках я хочу показувати лише мініатюру. Я не можу змінити html, тому використовую такий CSS:

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

Що (у більшості браузерів) робить сторінку рівномірно широкими ескізами, усі зі збереженим співвідношенням сторін.

Однак у IE6 зображення масштабується лише за розміром, зазначеним у CSS. Він зберігає «природну» висоту.

Ось приклад пари сторінок, які ілюструють проблему:

• Список, в якому повинні бути мініатюри
• Одне повідомлення в блозі, де показано зображення у повному розмірі.

Буду дуже вдячний за всі пропозиції, але хотів би зазначити, що (через обмеження обраної клієнтами платформи) я шукаю щось, що не передбачає модифікації html. CSS також буде кращим, ніж javascript.

EDIT: Слід зазначити, що зображення мають різний розмір та пропорції.

Адам Лютер дав мені ідею щодо цього, але насправді це виявилося дуже просто:

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

Тепер IE6 чудово масштабує зображення, і, схоже, це те, що використовують усі інші браузери за замовчуванням.

Дякую за обидві відповіді!

Я радий, що це вдалося, тому, мабуть, вам довелося явно встановити "auto" на IE6, щоб він імітував інші браузери!

Насправді я нещодавно знайшов іншу техніку масштабування зображень, знову призначену для фонів. Ця техніка має кілька цікавих особливостей:

1. Співвідношення сторін зображення зберігається
2. Оригінальний розмір зображення зберігається (тобто воно ніколи не може зменшуватися, лише зростати)

Розмітка спирається на елемент обгортки:

<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. Співвідношення сторін не буде ідеальним, але ви можете зробити це виглядати дещо нормально. Якщо ви дійсно хочете зробити його ідеальним, вам потрібно буде написати якийсь javascript, який буде читати оригінальну ширину зображення, і відповідно встановити співвідношення, щоб вказати висоту.

Єдиний спосіб зробити явне масштабування в CSS - це використовувати такі фокуси, як тут .

Тільки IE6, ви також можете використовувати фільтри (ознайомтесь з PNGFix ). Але для їх автоматичного застосування до сторінки знадобиться javascript, хоча цей javascript може бути вбудований у файл CSS.

Якщо вам потрібен javascript, вам може знадобитися просто заповнити відсутнє значення висоти, перевіривши зображення після завантаження вмісту. (Вибачте, у мене немає посилань на цю техніку).

Нарешті, і, вибачте за цю мильницю, ви можете уникнути підтримки IE6 у цьому питанні. Ви можете додати _width: autoпісля свого width: 75pxправила, щоб IE6 принаймні відображав зображення розумно, навіть якщо він неправильного розміру.

Я рекомендую останнє рішення просто тому, що IE6 вже на виході: 20% і знижується майже на відсотки на місяць . Крім того, я зауважую, що ваш сайт є рекреаційним і знаходиться у Великобританії. Обидва вони допомагають демографічній схильності відставати від IE6: використання IE6 зменшується майже на 40% у вихідні дні (без посилань вибачте), а Великобританія має значно нижчий демографічний показник IE6 (знову немає посилань, вибачте).

Удачі!