Как сохранить соотношение сторон при масштабировании изображения с использованием одного (CSS) измерения в IE6?

Вот проблема. У меня есть изображение:

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

Обратите внимание, что указана высота или ширина.

На некоторых страницах я хочу показывать только миниатюру. Я не могу изменить html, поэтому я использую следующий CSS:

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

Какой (в большинстве браузеров) делает страницу с равномерно широкими эскизами, все с сохраненными пропорциями.

Однако в IE6 изображение масштабируется только в размере, указанном в CSS. Он сохраняет "естественную" высоту.

Вот пример пары страниц, которые иллюстрируют проблему:

Я был бы очень благодарен за все предложения, но хотел бы отметить, что (из-за ограничений выбранной платформы для клиентов) я ищу что-то, что не связано с модификацией html. CSS также будет предпочтительнее javascript.

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

ОТВЕТЫ

Ответ 1

Адам Люттер дал мне идею для этого, но на самом деле это оказалось очень простым:

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

IE6 теперь масштабирует изображение, и это похоже на то, что по умолчанию используют все другие браузеры.

Спасибо за оба ответа, хотя!

Ответ 2

Я рад, что это сработало, поэтому я предполагаю, что вам нужно явно установить "auto" на IE6, чтобы он имитировал другие браузеры!

Недавно я нашел еще один метод масштабирования изображений, снова созданный для фона. Этот метод имеет несколько интересных особенностей:

  • Соотношение сторон изображения сохраняется
  • Поддерживается размер оригинала изображения (т.е. он никогда не может уменьшаться только)

Разметка основана на элементе обертки:

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

Учитывая указанную выше разметку, вы используете следующие правила:

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

Если вы затем контролируете размер обертки, вы получаете интересные эффекты масштаба, которые я перечисляю выше.

Чтобы быть явным, рассмотрим следующее базовое состояние: контейнер 100x100 и изображение, которое равно 10x10. Результатом является масштабированное изображение 100x100.

  • Начиная с базового состояния, контейнер изменен до 20x100, изображение остается на уровне 100x100.
  • Начиная с базового состояния, изображение изменяется на 10x20, изображение изменяется до 100x200.

Таким образом, другими словами, изображение всегда не меньше размера контейнера, но будет масштабироваться за его пределами, чтобы поддерживать его соотношение сторон.

Это, вероятно, не полезно для вашего сайта, и он не работает в IE6. Но полезно получить масштабированный фон для вашего порта или контейнера.

Ответ 3

Ну, я могу подумать о CSS-хаке, который разрешит эту проблему.

Вы можете добавить следующую строку в свой CSS файл:

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

Вышеупомянутый код будет отображаться только IE6. Соотношение сторон не будет идеальным, но вы можете сделать его несколько нормальным. Если вы действительно хотели сделать это совершенным, вам нужно будет написать javascript, который будет читать исходную ширину изображения, и установить отношение соответственно, чтобы указать высоту.

Ответ 4

Единственный способ сделать явное масштабирование в CSS - использовать трюки, например, найти здесь.

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

Если вам понадобится javascript, вам может потребоваться просто заполнить javascript отсутствующим значением для высоты, проверив изображение после загрузки содержимого. (Извините, у меня нет ссылки на эту технику).

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

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

Удачи!