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

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

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

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

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

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

В результате (в большинстве браузеров) страница состоит из миниатюр одинаковой ширины с сохраненным соотношением сторон.

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

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

• Список, в котором должны отображаться эскизы
• Одно сообщение в блоге, в котором показано полноразмерное изображение.

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

РЕДАКТИРОВАТЬ: Следует упомянуть, что изображения имеют разные размеры и соотношения сторон.

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

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

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

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

Я рад, что это сработало, поэтому я предполагаю, что вам пришлось явно установить «авто» в 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, вы можете просто указать javascript для заполнения недостающего значения высоты, проверив изображение после загрузки содержимого. (Извините, у меня нет ссылки на эту технику).

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

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

Удачи!