растягивание и масштабирование изображения ie6

Мне нужно иметь возможность растянуть фоновое изображение, чтобы оно соответствовало размеру окна, теперь оно работает во всех браузерах, кроме ie6. Я бесконечно искал в Интернете решение и перепробовал все, что нашел, но в ie6 ничего не работает.

вот мой демонстрационный сайт, если у вас есть ie6, вы сможете увидеть мою проблему, мне нужно, чтобы он тоже растянулся на всю ширину и высоту, не искажая изображение вообще

http://demo.jigsawfinance.com/

кто-нибудь знает решение, которое будет работать, у меня есть тег img и т. д., но все равно безрезультатно

для тех, у кого нет ie6, вот снимок экрана

альтернативный текст

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


image-scaling background internet-explorer-6
person sam    schedule 27.10.2010    source источник

Ответы (3)


arrow_upward
1
arrow_downward

В CSS 3 есть способ сделать это, но поскольку IE6 его не поддерживает, я думаю, что лучше всего использовать тег img.

e.g.

<img src="../images/jigsaw_logo.png" style="width: 100%; position: absolute; top: 0; left: 0; z-index: -1;"/>

Это сохранит пропорции вашего изображения и переместит его обратно.

Также обратите внимание, что в CSS IE вы можете указать выражения, поэтому попробуйте приведенное ниже, если у вас возникли проблемы с обычной шириной 100% CSS:

width: expression(document.body.clientWidth + 'px');
person Manny    schedule 27.10.2010
comment
спасибо, я только что попробовал, но все же ie6 не растягивает img до полного размера окна :( - person sam; 27.10.2010
comment
можешь попробовать на чистом html? Что значит полный размер окна? Изображение совсем не растягивается? Это может быть вызвано полями/отступами. Я попробовал это в IE6, и это работает. - person Manny; 27.10.2010
comment
хорошо, это работает на чистом листе, но у меня есть красный крест в углу, я не понимаю, почему это не работает на моих страницах? - person sam; 27.10.2010
comment
Хорошо, это работает, но если вы переместите окно сбоку, изображение сожмется до исходного размера. - person sam; 27.10.2010
comment
добавление высоты на 100% исправляет это, но затем искажает изображение: S - person sam; 27.10.2010
comment
высота 100% обязательно исказит изображение. Куда вы добавили изображение, попробуйте добавить его сразу после тега body. Например. ‹/head› ‹body class=HomeIndex› ‹!-- поместите сюда изображение!!!!/--› ‹div id=container› - person Manny; 27.10.2010
comment
я также пытался добавить минимальную ширину и минимальную высоту, но ie6, похоже, не отображает это - person sam; 27.10.2010
comment
здесь я поместил его ‹head› ‹title›Home‹/title› ‹/head› ‹body› ‹img src=../images/bg.jpg style=width: 100%; положение: абсолютное; сверху: 0; слева: 0; z-индекс: -1; /› ‹/тело› ‹/html› - person sam; 27.10.2010
comment
не имеет никакого эффекта в ie6, когда я добавляю его на свою реальную страницу - person sam; 27.10.2010
comment
добавьте ‹body style=margin: 0› для ie6, чтобы удалить поля. - person Manny; 27.10.2010
comment
растянул его примерно на 10 пикселей, может быть, img, кажется, расширяется только до размера фактического контейнера - person sam; 27.10.2010
comment
В вашем чистом html контейнер - это тело, верно? Затем попробуйте использовать ‹body style=margin: 0; ширина: 100%; высота: 100%› - person Manny; 27.10.2010
comment
нет, как только я изменяю размер окна сбоку, изображение уменьшается по высоте и оставляет много пустого пространства - person sam; 27.10.2010
comment
В вашем браузере включено автоматическое изменение размера? Инструменты -> Свойства обозревателя -> вкладка «Дополнительно» -> в разделе «Мультимедиа» -> «Включить автоматическое изменение размера изображения». - person Manny; 27.10.2010
comment
хорошо, думаю, я пойду по вашему пути и буду работать над небольшим пустым пространством внизу, пока не найду лучшее решение, спасибо за ваше время сегодня - person sam; 27.10.2010
comment
но я думаю, что это как-то связано с моим css - person sam; 27.10.2010
comment
похоже, это ширина моего контейнера, которая не позволяет ему расширяться до полного размера окна. - person sam; 27.10.2010
comment
обратите внимание, что в IE вы также можете принудительно использовать выражения, например. ширина: выражение (document.body.clientWidth + 'px'); ‹-- это приведет к увеличению ширины изображения. - person Manny; 28.10.2010

arrow_upward
2
arrow_downward

Взгляните на это: Растягивание и масштабирование изображения CSS в фоновом режиме - только с помощью CSS

также этот макет работает в IE6: http://www.cssplay.co.uk/layouts/background.html

person Moin Zaman    schedule 27.10.2010
comment
спасибо, я смотрел на это раньше, у меня не работает в ie6 :( - person sam; 27.10.2010
comment
это просто помещает изображение в центр, но не весь фон - person sam; 27.10.2010
comment
да, я пробовал оба, второй вид работает, но он искажает фон - person sam; 27.10.2010
comment
как вы можете заполнить весь браузер, но не изменить соотношение сторон изображения? то есть либо изображение должно искажаться, либо изображение должно растягиваться в одном измерении, чтобы соответствовать ширине или высоте, а другое должно быть больше и обрезаться. - person Moin Zaman; 27.10.2010

arrow_upward
1
arrow_downward

Растягивание изображения без потери качества для IE6:

<div Style="Position:Relative; Width:2000px; Height:1500px;
Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
Src='C:\SomePic.jpg',SizingMethod='scale');"></div>
person MPS    schedule 18.07.2011