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

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

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

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

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

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

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

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

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

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

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

92
css image internet-explorer internet-explorer-6 javascript

4 ответов

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

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

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

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

198

Я рад, что это сработало, поэтому, я думаю, вам пришлось явно установить "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, в изображение остается измененным 100х100.
  2. начиная с базового состояния, изображение изменено на 10x20, изображение изменяется до 100х200.

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

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

14

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

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

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

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

2

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

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

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

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

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

удачи!

2