Альтернатива для фона размера: обложка в IE7 +

У меня есть фоновое изображение на теле моей веб-страницы. я использовалbackground-size:cover так что изображение растягивается по всему телу, сохраняя при этом пропорции изображения. Я хотел бы, чтобы это было то же самое для IE7 + IE8.

Я посмотрел вокруг и увидел следующий код:

<code>filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='AutumnWinter_4.jpg',
    sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='AutumnWinter_4.jpg',
    sizingMethod='scale')";
</code>

Но это не сохраняет соотношение сторон, что очень плохо для веб-сайта, на который мы нацелены.

Есть какой-либо способ сделать это? Не заводя jQuery?

 ediblecode17 апр. 2012 г., 13:25
@MyHeadHurts Это работает только в IE9 +
 My Head Hurts17 апр. 2012 г., 14:40
CSS-Only Technique #1 работает для IE7 и предоставляет ссылку на рабочий пример. Хотя & quot; Только для CSS & quot; часть немного вводит в заблуждение, когда вы добавляете inlineimg элемент. Насколько я знаю, это будет единственный способ сделать это без "удара" JQuery
 My Head Hurts16 апр. 2012 г., 20:15

Ответы на вопрос(8)

большинство решений такого рода проблем либо зависят от css3, либо игнорируют встроенную функциональность "cover" это сохраняет исходное соотношение сторон изображения.https://github.com/louisremi/background-size-polyfill предполагается сохранить соотношение, но я никогда не смогу заставить его работать полностью при растяжении браузера определенным образом (ошибка оператора, я уверен :-)). Чтобы решить эту проблему, я написал скрипт jquery, который я тестировал на safari, chrome, ff и ie8 +. Вы заметите, что вам придется использовать абсолютно позиционированный img вместо css background-image. Просто добавьте bgImg в качестве идентификатора в тег в HTML.

CSS:

.container { height: auto; overflow:hidden; position:relative;}
.container #bgImg { position:absolute; z-index:-1;} 

Ваш селектор изображений должен быть расположен абсолютно так, чтобы он мог сидеть за контентом. Это означает, что родительский контейнер должен иметь положение: относительное, а затем переполнение: скрытое, чтобы все переполнения из изображения (поскольку вы сохраняете соотношение, некоторые его части неизбежно будут скрыты). Имейте также в виду, что некоторые отображаемые теги в родительском контейнере сломают скрытие переполнения.

Jquery:

$(window).load(function () {

    // only do this once and pass as function parameters, because chrome
    // and safari have trouble not only with document.ready but window.resize
    var img = new Image();
    img.src = $("#bgImg").attr('src');
    var $width_orig = img.width;
    var $height_orig = img.height;

    resizeBGImage($width_orig, $height_orig);

    $(window).resize(function () {
        resizeBGImage($width_orig, $height_orig);
    });
});

function resizeBGImage($width_img_orig, $height_img_orig) {
    // get dimensions of container
    var $width_container = $('.container').outerWidth();
    var $height_container = $('.container').outerHeight();

    // calculate original aspect ratio and ratio of the container
    var $imageratio = $width_img_orig / $height_img_orig;
    var $containerratio = $width_container / $height_container;

    var $wdiff = $width_container - $width_img_orig;
    var $hdiff = $height_container - $height_img_orig;

    // original size, so just set to original
    if (($wdiff == 0) && ($hdiff == 0)) {
        $("#bgImg").css('width', $width_img_orig);
        $("#bgImg").css('height', $height_img_orig);
    }
    // if container is smaller along both dimensions than the original image, 
    // set image to container size
    else if (($wdiff < 0) && ($hdiff < 0)) {
        $("#bgImg").css('width', $width_img_orig);
        $("#bgImg").css('height', $height_img_orig+1); // adding one because chrome can't do math
    }
    // if container is wider than long relatiave to original image aspect ratio
    // set width to container width and calculate height 
    else if ($containerratio > $imageratio) {
        $("#bgImg").css('width', $width_container);

        // calculate height using orig aspect ratio and assign to image height 
        $("#bgImg").css('height', (($width_container * $height_img_orig) / $width_img_orig) + 1); // adding one because chrome can't do math
    }
    // else container is taller than long relatiave to original image aspect ratio
    // set height to container height and calculate width
    else {
        // set the image height to container height
        $("#bgImg").css('height', $height_container + 1); // adding one because chrome can't do math

        // calculate width using orig aspect ratio and assign to image width
        $("#bgImg").css('width', (($height_container * $width_img_orig) / $height_img_orig));
    }
    $("#bgImg").css('left', (($width_container - $("#bgImg").width()) / 2).toString() + 'px');
};

Обратите внимание на использование $ (window) .load () вместо $ (document) .ready (). Chrome и Safari, похоже, имеют проблемы с последним, поскольку в этих браузерах фоновое изображение может загружаться не полностью, когда DOM работает. Использование $ (window) .load () гарантирует, что все элементы окна будут на месте перед запуском скрипта.

 ediblecode13 авг. 2013 г., 16:57
Похоже, плохая версия backstretch.js

Вы можете просто подделать фоновое изображение с реальным изображением. Это немного больше редактирования HTML и, конечно, не идеально, но с каких пор обработка IE когда-либо была идеальной?

<body>
  <img id="mainBG" src="mainBG.jpg" />
  <div id="content">
  [ ... ]

Тогда стилизовать это соответственно

body{
  position:relative;
}
#mainBG{
  width:100%
  position:absolute;
  top:0px;
  left:0px;
}

Должен быть кросс-браузерным, если я не ошибаюсь.

Я использовал следующее (http://css-tricks.com/perfect-full-page-background-image/) и это хорошо работает в ie7.

HTML:

<body>
    <img class="bg" src="filename">       
</body>   

CSS:

.bg {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
    img.bg {
        left: 50%;
        margin-left: -512px;   /* 50% */
    }
}
 18 апр. 2012 г., 07:42
Да, хороший момент - я был там ленивый, у меня это было где-то еще, и у меня не было удобной ссылки. РЕДАКТИРОВАНИЕ
 20 апр. 2012 г., 06:06
Если изображение растянуто по всему<body>Есть ли способ, по которому изображение не будет центрировано? Полагаю, кроме добавления отрицательной маржи.
 18 апр. 2012 г., 04:58
Кроме того, поскольку вы сильно ударили по коду (что само по себе неплохо, это показывает исследование), вы должны были дать ссылку на источник в качестве кредита, будь тоhere или в другом месте.
 18 апр. 2012 г., 04:42
Одна проблема с вашим решением заключается в том, что IE8 и ниже не поддерживают запрос @media(max-width: 1024px) что вы используете для "центрирования". Это проблема, с которой я столкнулся, размышляя над решением этой проблемы. Для его центрирования (если это требуется) может потребоваться javascript, который danRhul уже отметил как приемлемый в качестве ответа.

ых комментариях дляIE<8 только для того, чтобы для любого другого современного браузера не загружался jQuery.

Также учтите, что IE7 имееточень низкая доля рынка (2,52%, апрель 2012 г.) поэтому может быть допустимо загрузить ~ 25 КБ дополнительно для этого конкретного браузера, если эта функция так важна для вашего сайта / приложения.

Итак, я нашел этот плагин для jQuery:https://github.com/louisremi/jquery.backgroundSize.js

A jQuery cssHook adding support for "cover" and "contain" to IE6-7-8, in 1.5K

УвидетьСтраница проекта Github для получения дополнительной информации.

 30 окт. 2013 г., 22:38
@PKHunter, Outlook 2010 и будущее использованиеWord рендерить HTML, а не IE6. Что, возможно, хуже.
 21 авг. 2013 г., 05:43
Другая причина не использовать Jquery в том, что нам может понадобиться то же самое для шаблонов электронной почты. Большинство почтовых клиентов, таких как Gmail и Outlook (крупные), удаляют любые JS. Даже CSS должен быть старым - Outlook 2010 по-прежнему основан на IE6 или ниже.
 20 апр. 2012 г., 06:10
Я полагаю, что причиной неиспользования jQuery является то, что у & lt; 10% интернет-пользователей с отключенным JS. Наверное? Точные цифры, кажется, трудно найти, но в этом посте есть довольно много ссылок.stackoverflow.com/questions/9478737/…
 20 апр. 2012 г., 09:25
Некоторые мысли: 1. Я думаю, что здесь необходим js 2. Уловка только для IE (и обычно IE поставляется с включенным js, исключая интрасеть) 3. Думайте в терминах прогрессивного улучшения. Нет JS - & gt; Ваше изображение будет позиционироваться (в IE), видя другой эффект.

что это старый вопрос, но я подумал, что поделюсь решением, которое я нашел, для всех, кто найдет этот вопрос в Google, как и я.

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

HTML: переместить фоновое изображение в<img />сделай это первым делом в своем<body>.

<html>
    <body>
        <img class="background" src="kitty.jpg" />
        <div class="content">
            ...

CSS: сделать фон отображаемым под контентом, установить егоmin-width/height до 100%.

html {
    height: 100%
}

body .background {
    position: absolute;
    z-index: -1;
    min-height: 100%;
    min-width: 100%;
}

Этоmin-height а такжеmin-width здесь это делает волшебство. Не задавайте изображению ширину и высоту в HTML или CSS, иначе соотношение сторон изменится.

Вышеуказанное будет работать дляIE7 а такжеIE8, Если вы хотели бы поддержатьIE6Вы можете установить откат центрированного изображения следующим образом:

CSS: ЕслиIE6, не отображайте изображение, вместо этого используйте фоновое изображение.

body {
    _background: url("kitty.jpg") 50% top no-repeat;
}

body .background {
    _display: none;
}

(N.B. Если вам не нравится взлом подчеркивания для целиIE6, вы могли бы использоватьусловными вместо & # x2013; это то, чтоHTML5 Boilerplate делает.)

Решение Вопроса

backgroundSize.js на самом деле не растягивает изображение bg в IE7, а просто центрирует его в исходном размере. Увидеть ихdemo и нажмите на'Check what IE6-7-8 users would normally see.'

@danRhul

Я прочитал этоbackstretch будет работать в IE7 +

Удачи!

 29 окт. 2013 г., 14:22
Удивительное подключение! работает как шарм. Стоит =)

После долгих проб и ошибок лучшим решением было угадать это!

Следующее сработало для меня.

body {
background-size:100%;
}
 ediblecode19 сент. 2013 г., 10:30
Я упоминал об этом в вопросе.background-size не работает в IE7, поэтому, к сожалению, он действительно не отвечает на вопрос.

Ваш ответ на вопрос