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

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

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

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

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

Есть ли способ сделать это? Без удара jQuery?

Ответ 1

backgroundSize.js на самом деле не растягивает bg-изображение в IE7, кажется, просто центрирует его на исходный размер. Посмотрите их demo и нажмите "Проверить, что обычно видят пользователи IE6-7-8".

@danRhul

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

Удачи!

Ответ 2

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

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

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

A jQuery cssHook добавляет поддержку "обложки" и "содержит" к IE6-7-8, в 1.5K

Подробнее см. страницу проекта Github.

Ответ 3

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

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

Затем соответствующим образом нарисуйте

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

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

Ответ 4

Я использовал следующее (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% */
    }
}

Ответ 5

Я знаю, что это старый вопрос, но я подумал, что поделюсь решением, которое я придумал для всех, кто нашел этот вопрос в 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;
}

(Примечание. Если вам не нравится, когда подстрочный знак подчеркивания IE6, вы можете вместо этого использовать условные обозначения - что делает HTML5 Boilerplate.)

Ответ 6

К сожалению, большинство решений этой проблемы либо зависят от css3, либо игнорируют встроенную функциональность "обложки", которая сохраняет исходное соотношение сторон изображения. https://github.com/louisremi/background-size-polyfill должен сохранять соотношение, но я никогда не смог бы заставить его работать полностью, когда растягивает браузер определенным образом (ошибка оператора, m sure:-)). Чтобы решить эту проблему, я написал jquery script, который я тестировал на сафари, хром, ff и ie8+. Вы заметите, что вам нужно будет использовать img, помещенную абсолютно вместо css background-image. Просто добавьте bgImg как id в тег в 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 и сафари, кажется, есть проблемы с последним, поскольку в этих браузерах фоновое изображение может быть не полностью загружено, когда DOM. Использование $(window).load() гарантирует, что все элементы окна будут установлены до запуска script.

Ответ 7

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

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

body {
background-size:100%;
}

Ответ 8

У меня была похожая проблема. Я решил это только с помощью CSS.

В основном, Object-fit: cover помогает вам решить задачу поддержания соотношения сторон при размещении изображения внутри div.

Но проблема заключалась в Object-fit: cover не работала в IE, она занимала 100% ширины и 100% высоты, а соотношение сторон было искажено. Другими словами, эффекта увеличения масштаба изображения не было, что я видел в Chrome.

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

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Как только это в центре, я даю изображение,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Это заставляет изображение получить эффект Object-fit: cover.

Вот демонстрация вышеуказанной логики.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Эта логика работает во всех браузерах.

Ответ 9

У вас есть два варианта для достижения этого только с помощью CSS:

Используйте Object-fit: cover. Единственная проблема с этим состоит в том, что это не будет работать во всех браузерах
Если вы хотите кросс-браузерную поддержку, вы можете следовать примитивному подходу CSS:

Поместите изображение внутри контейнера с абсолютным, а затем поместите его прямо в центре, используя комбинацию:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Примечание. Поскольку преобразование работает ТОЛЬКО из IE9, вы можете использовать фильтры. Вот ответ для этого.

Как только он в центре, вы можете сделать,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Это заставляет изображение получить эффект Object-fit: cover.

Вот демонстрация вышеуказанной логики.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Ответ 10

Похоже, вам нужен "прокладка" или "polyfill", например "Модернизатор": http://modernizr.com/docs/#html5inie