Как я могу помещать изображение фона полный размер в div используя унифицированный указатель ресурса?

Далее - мой код , у меня есть один

, один
и карусель в .

Все хорошо до тех пор, пока я не хочу осуществить изображение фона во мне div с классом "main" в следующем изображении инспектируемые элементы.

introducir la descripción de la imagen aquí

Светло-оранжевый цвет -

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

.main {

    background-image: url(assets/images/fondo1.jpg);
}

Также я пробовал с Веб изображением и мне удалось разместить ее, но только в мозаичном типе и я хочу, чтобы было полным единственное изображение, используйте этот код.

    .main {

    background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSg3O0NE7UMpDZghidkYpLmmE0Z8bleQbiI4ZkrxMa0rDzpYUHE");
}

Но он увиден так.

introducir la descripción de la imagen aquí

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

2
задан 07.12.2016, 11:41
4 ответа

Пробуй используя style в HTML в месте применять это в CSS [больше примеров здесь].1

Пробуй добавляя это к твоему классу

class="carousel-inner" style="background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSg3O0NE7UMpDZghidkYpLmmE0Z8bleQbiI4ZkrxMa0rDzpYUHE) no-repeat left center; background-size: cover;" 
3
ответ дан 24.11.2019, 14:35
  • 1
    Большое спасибо этот код я функционировал! я тебе благодарен за это много! –  Alejandro Ruiz 16.04.2016, 21:59
  • 2
    Ты веришь в то, что было возможно включать и #39; style = и quot; background:url (assets/images/fondo1.jpg) " и #39;? я это попробовал и этого не добился, включать локальное изображение в папку рабочего стола? так как это изображение, что мы используем этого доказательства Веб. –  Alejandro Ruiz 16.04.2016, 22:06

Алехандро, в коротко, так как говорится об элементе 'full resposive', чтобы давать ему решение, нужно осуществлять, путь Jquery, (1) функция настройки высоты на основании ширины slider; (2) работать с событиями ‘slide.bs.carousel’, - что является началом изменения изображения в slider, - и ‘slid.bs.carousel’ – что следует в конце изменения-; (3) и осуществлять функцию восхождения изображения, согласно размерам div отец и изображения в вопросе.

В длине.

1-. Функция, о которой он “приходил к заключению” бы, на основании ширины div отец изображения, высота того же самого. Достигнутый предыдущее, есть 'крепить' эти размеры, для того, чтобы (когда прибудет изображение, не импортируя размера той же самой) slider не изменил Вашу высоту.

Вышеупомянутая функция нужна присоединять ее к событию resize - '$ (window) .on ('resize', functon () {.... - для того, чтобы slider пребывал 'full reponsive’.

    var $parentImgW = ' '
    var $parentImgH = ' ';
    var $myCarousel = $('#myCarousel')
    var $carouseItems =  $('.item');
    function $F_getAdjustImagesParents(){
        $parentImgW = $myCarousel.width(); // A
        $parentImgH =  ($parentImgW*9)/16; // B
        $carouseItems.height($parentImgH+'px').css('max-height',$parentImgH+'px'); //C
        console.log('$parentImgW ====> '+$parentImgW);
        console.log('$parentImgH ====> '+$parentImgH)
    };
   $F_getAdjustImagesParents();

    $(window).on('resize',function(){  // D
        $F_getAdjustImagesParents();
    });

2-. В событии события ‘slide.bs.carousel’, - что является началом изменения изображения в slider, как раньше сказали мы, - мы будем получать число ‘slide’, который будет входить, который будет служить нам для, как только он закончил переход изображения – события ‘slid.bs.carousel ’-, для того, чтобы знать о, какое изображение идут получать первоначальные размеры.

    $myCarousel.on('slide.bs.carousel', function(event) {// Start the slide’s change process
          var $slideNum = $("#"+event.relatedTarget.id).data('slide_num'); // F
          console.log('$lideNum ====> '+$slideNum)
          $myCarousel.on('slid.bs.carousel', function(event) {//end Start the slide’s change process
            var $imgW = $('#myCarouselSlideImage'+$slideNum).width(); //G
            var $imgH = $('#myCarouselSlideImage'+$slideNum).height(); //G
            console.log('$imgW ====> '+$imgW);
            console.log('$imgH ====> '+$imgH); ......

3-. Как только по отношению к себе имеют отставки так div отец как изображения, тогда уже мы можем использовать функцию восхождения изображения.

       ....
        var $result = ''; 
        $result = ScaleImage($imgW, $imgH, $parentImgW, $parentImgH, true); //H
        console.log('$result.width ====> '+$result.width);
        console.log('$result.height ====> '+$result.height);
        console.log('$result.targetleft ====> '+$result.targetleft);
        console.log('$result.targettop ====> '+$result.targettop);
        $('#myCarouselSlideImage'+$slideNum).animate({ // I
                                                  width:$result.width+'px',
                                                  height:$result.height+'px',
                                                  left:$result.targetleft+'px',
                                                  top:$result.targettop+'px'      },
                                                                300);
      });
   });

function ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox) {

    var result = { width: 0, height: 0, fScaleToTargetWidth: true };

    if ((srcwidth <= 0) || (srcheight <= 0) || (targetwidth <= 0) || (targetheight <= 0)) {
        return result;
    }

    // scale to the target width
    var scaleX1 = targetwidth;
    var scaleY1 = (srcheight * targetwidth) / srcwidth;

    // scale to the target height
    var scaleX2 = (srcwidth * targetheight) / srcheight;
    var scaleY2 = targetheight;

    // now figure out which one we should use
    var fScaleOnWidth = (scaleX2 > targetwidth);
    if (fScaleOnWidth) {
        fScaleOnWidth = fLetterBox;
    }
    else {
       fScaleOnWidth = !fLetterBox;
    }

    if (fScaleOnWidth) {
        result.width = Math.floor(scaleX1);
        result.height = Math.floor(scaleY1);
        result.fScaleToTargetWidth = true;
    }
    else {
        result.width = Math.floor(scaleX2);
        result.height = Math.floor(scaleY2);
        result.fScaleToTargetWidth = false;
    }
    result.targetleft = Math.floor((targetwidth - result.width) / 2);
    result.targettop = Math.floor((targetheight - result.height) / 2);

    return result;
}

Необходимо упоминать о том, что для того, чтобы все это функционировало, нужно налаживать параметр положения изображения в абсолютный; и это должно делаться в Jquery, благодаря тому, что, если делается с Css slider, он не развернется правильно.

    $('.myCarouselImgs').css('position','absolute'); // E

Ты можешь видеть предыдущее функционируя в: https://jsfiddle.net / omarlin25 / nd90r1ht / 59 /

Nota1: Предыдущее, он пошел восполни запас разработанная для сходного вопроса в версии anglo. Ты можешь видеть ее Здесь.

Nota2. Шрифт, и объяснение, от функции восхождения изображения происходит Здесь.

2
ответ дан 24.11.2019, 14:35

Происходи, из-за которого Bootstrap препятствует этому тебе, так как иерархией CSS стили Bootstrap берутся сначала. То, что ты должен делать, он состоит в том, чтобы использовать! important в твоем CSS и этот будет взят.

.main {
  background-image: url(assets/images/fondo1.jpg) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

background-repeat: no-repeat; предотврати мозаику и background-size: каверверсия; вынуди к изображению вмещать все место. А ты это хочешь, и только хочешь изображение, сориентированная, что не повторился и не вместило все место используй:

.main {
  background-repeat: no-repeat !important;
  background-position: top center !important;
}

Или если ты хочешь, чтобы он только повторился в Y:

background-repeat: repeat-y !important;

Я надеюсь, что он подает тебя, привет.

0
ответ дан 24.11.2019, 14:35
  • 1
    Превосходный much и # 237; пропасти спасибо за помогание мне знать больше на bootstrap и Ваш jerarqu и # 237; в –  Alejandro Ruiz 19.04.2016, 23:32

ты не так болен..., может быть, показываешь плохо маршрут. пробуй:

.main {

    background-image: url(../assets/images/fondo1.jpg);
    background-size: 100%;
}

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

0
ответ дан 24.11.2019, 14:35