Используйте обратную растяжку внутри деления И уменьшайте ширину до ширины деления - PullRequest
Новая
       0

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

1 голос
/ 19 августа 2011

Я пытаюсь использовать backstretch внутри подразделения.Я понял, как это сделать здесь , но ширина изображения все еще растягивается, чтобы заполнить все тело.Есть ли способ управления изображением на спине, чтобы оно заполняло всю высоту и ширину деления, а не все тело?(Разделение плавное, иначе я бы использовал статическое фоновое изображение.)

Ответы [ 2 ]

3 голосов
/ 18 апреля 2012

* Редактировать: с тех пор, как я написал это, я перестал использовать backstretch на обычных настройках, потому что он не очень хорошо работает на смартфонах Android или когда ориентация планшетов изменилась.Однако, эта модификация, объясненная здесь, по-прежнему прекрасно работает, поэтому, если вы хотите читать версию с фиксированной высотой - я прикрепил JS ниже, HTML-код:

<body> <div id="backimage"></div> </body>

Вот ссылка на файл JS -> http://www.mcnab.co/backstretch.js

Я хотел использовать backstretch для заполнения элемента, который был на всю ширину, но занимал только верхние 560px экрана.И если размер изображения должен был быть больше, чем оригинал, он не центрировался по вертикали, а был смещен, так что верхняя часть исчезла.

Да, ссылка выше верна, вы меняете контейнер с тела на элементВы хотите заполнить, в данном случае это было # backimage 

 // Append the container to the #backimage, if it's not already there
  if($("#backimage #backstretch").length == 0) {
     $("#backimage").append(container);
  }

Затем я изменил код, чтобы назначить фиксированную высоту CSS загруженному изображению, а не 100%; 

// If this is the first time that backstretch is being called
   if(container.length == 0) {
       container = $("<div />").attr("id", "backstretch")
                   .css({left: 0, top: 0, position: "fixed", overflow: "hidden", zIndex: -999999, margin: 0, padding: 0, height: "560", width: "100%"});
    } else {
       // Prepare to delete any old images
        container.find("img").addClass("deleteable");
    }

Чтобы достичь этого, метод _adjustBG должен быть немного изменен.Прежде всего вам нужно предоставить переменным imgWidth и imgHeight глобальную область видимости.Удалите их из 

var self = $(this);

и добавьте их к 

rootElement = ("onorientationchange" in window) ? $(document) : $(window), 
imgRatio, bgImg, imgWidth, imgHeight, bgWidth, bgHeight, bgOffset, bgCSS;

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

function _adjustBG(fn) {
    try {
        bgCSS = {left: 0, top: 0}
        bgWidth = rootElement.width();
        bgHeight = bgWidth / imgRatio;  

            if( bgHeight <= 560 ) {

                bgHeight = 560;
                bgWidth = 560 * imgRatio;

                bgOffset = ( bgWidth - rootElement.width() ) / 2;
            if(settings.centeredY) $.extend(bgCSS, {left: "-" + bgOffset + "px"});                      

            } else {

                bgHeight = (rootElement.width() / imgRatio);
                bgWidth = rootElement.width()

                bgOffset = ( bgHeight - 560 );
            if(settings.centeredY) $.extend(bgCSS, {top: "-" + bgOffset + "px"});   

            }

        $("#backstretch, #backstretch img:last").width( bgWidth ).height( bgHeight )
                                                .filter("img").css(bgCSS);
    } catch(err) {
        // IE7 seems to trigger _adjustBG before the image is loaded.
        // This try/catch block is a hack to let it fail gracefully.
    }

    // Executed the passed in function, if necessary
    if (typeof fn == "function") fn();
}

};

Это прекрасно работает для меня, и я надеюсь, что это поможет кому-то еще.Если кто-нибудь придет сюда и даст какие-нибудь комментарии о том, как я мог бы сделать это лучше, я был бы рад услышать их.

Приветствия,

Робби.

2 голосов
/ 14 февраля 2015

Я сделал это намного проще.Ищите ratio в backstretch.js.Это говорит что-то вроде: 

"ratio",h/f

Я изменил его на ч / ч-1 - после попытки миллиона различных формул.Тогда я понял, что это на самом деле соотношение ноль.Поэтому измените его на: 

"ratio",0

Теперь изображения торчат на 100% ширины независимо от высоты.Затем я установил максимальную ширину и минимальную ширину в css с помощью тега @media и убедился, что раздел содержимого страницы всегда подпрыгивал, чтобы не было пробелов под изображением по мере его уменьшения.Вы можете увидеть пример здесь:

http://katjaglieson.com

Это заняло у меня целый день, lol.

Но, по сути, это останавливает безумный полный экран backstretch, носохранив все остальные вкусности.

:)

...