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

Question

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

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

Примечание: высота и ширина не указаны.

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

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

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

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

Я рад, что это сработало, поэтому я думаю, вам пришлось явно установить '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. Начиная с базового состояния, Контейнер размером до 20х100 г. размер изображения остается в размере 100x100.
2. Начиная с базового состояния, изображение изменено на 10х20, изображение изменяет размер до 100x200.

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

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

Answer 3

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

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

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

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

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

Удачи!

Answer 4

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

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

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

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