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

Question

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

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

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

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

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

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

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

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

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

список, в котором должны отображаться миниатюры

один пост в блоге, который показывает полноразмерное изображение.

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

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

627 4

javascript css image internet-explorer

4 ответов:

Comments

Ничего не найдено.

Tom Wright · Accepted Answer · 2009-04-17 00:31:08

Адам Лютер дал мне идею для этого, но на самом деле оказалось очень просто:
img {
  width:  75px;
  height: auto;
}
IE6 теперь масштабирует изображение отлично, и это, кажется, то, что все другие браузеры используют по умолчанию.

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

Adam Luter · Accepted Answer · 2009-04-29 21:15:01

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

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

соотношение сторон изображения сохраняется

исходный размер изображения сохраняется (то есть, он никогда не может сокращаться только расти)

разметка зависит от a элемент обертки:
<div id="wrap"><img src="test.png" /></div>
учитывая вышеуказанную разметку, вы затем используете эти правила:
#wrap {
  height: 100px;
  width: 100px;
}
#wrap img {
  min-height: 100%;
  min-width: 100%;
}
Если вы затем контролируете размер обертки, вы получаете интересные эффекты масштабирования, которые я перечисляю выше.

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

начиная с базового состояния, контейнер изменен до 20x100, изображение остается измененным на 100х100.

начиная с базового состояния, изображение изменяется на 10x20, изображение изменяет размер до 100x200.

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

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

jgallant · Accepted Answer · 2009-04-16 22:57:00

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

вы можете добавить следующую строку в свой CSS-файл:
* html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; } 
приведенный выше код будет виден только IE6. Соотношение сторон не будет идеальным, но вы можете сделать его несколько нормальным. Если вы действительно хотите сделать его идеальным, вам нужно будет написать некоторый javascript, который будет читать исходную ширину изображения и устанавливать соотношение соответственно для указания высоты.

Adam Luter · Accepted Answer · 2009-04-16 23:13:32

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

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

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

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

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

удачи!