бутстрап, как сделать фиксированную высоту отзывчивой?

Как создать фиксированный элемент высоты, реагирующий на загрузку 3? Например, я установил высоту карусели на 650 пикселей. Но я не могу сделать его отзывчивым, как изображения. Есть идеи?бутстрап, как сделать фиксированную высоту отзывчивой?

CSS,

#article-carousel .carousel-inner{ 
    height:650px; 
}

HTML,

<!-- Carousel items --> 
<div class="carousel-inner"> 

    <div class="active item"> 
    <img src="style/image/10403889_707684359268375_7804458077651816095_o.jpg" class="img-responsive"/> 
    </div> 
....

enter image description here

источник

2014-09-22 laukok

Вы пытались изменить высоту элемента img вместо .carousel-inner? – fstanis

изображения имеют разную высоту, поэтому я хочу обрезать их, используя скрытые переполнения ... – laukok

Задайте класс, отвечающий требованиям img, к высоте: 100%, чтобы изображение было полным. – crazymatt

Вы можете использовать CSS3 объект посадки для изменения размера изображения http://jsfiddle.net/xcoq9xxg/

img { 
    height: 650px; 
    width: 100%; 
    object-fit: cover; // here 
}

Он работает для Chrome и Opera. Используйте библиотеку полифония для других: https://github.com/schmidsi/jquery-object-fit или https://github.com/anselmh/object-fit.

Другой способ заключается в использовании CSS3 фон-размерhttp://jsfiddle.net/dizel3d/rwdspudv/

.image { 
    height: 650px; 
    background-position: center; 
    background-size: cover; 
}

Он работает во всех современных браузерах без JavaScript, но вы должны использовать <div> вместо <img>:

<div class="image" style="background-image: url('my-image.jpg')"></div>

источник

2014-09-22 18:55:09 dizel3d

Не поддерживается это широко. Слишком много красного: http://caniuse.com/#feat=object-fit – Christina

Хорошо, используйте библиотеку полифония, такую как https://github.com/schmidsi/jquery-object-fit – dizel3d

Я улучшил ответ, добавив css3 ' background-size'. – dizel3d

Try:

.carousel-inner > item { position: relative; overflow:hidden; } 
.carousel-inner > item > .img-responsive { position: absolute; top:0; bottom:0; }

или я думаю будет лучше ли я т с JS (с boostrap мы будем использовать JQuery):

... 
function init_carousel(){ 
    H = +($(window).height()); // or $('.carousel-inner') as you want ... 
    $('.img-responsive').css('height',H+'px'); 
} 
init_carousel(); 
...

В этом случае добавьте DIV с фоновым изображением в, и ваш CSS должен быть:

.carousel-inner > item { position: relative; overflow:hidden; } 
.carousel-inner > item > .img-responsive-fix { position: absolute; top:0; bottom:0; left:0; right:0; text-align:center; padding:0; margin:0; } 
.carousel-inner > item > .img-responsive { witdh:auto; }

источник

2014-09-22 18:35:36 pirs

  function Screensize() { 
     try { 
      var height = ((screen.height * 80)/100); 
      document.getElementById('Mapbox').setAttribute("style", "display:block;height:" + height + "px; overflow:auto;"); 
     } 
     catch (ex) 
     { alert(ex); }                                                                                                                                                                                                                                                                                                                                                                                                                   
    }

источник

2015-10-30 09:41:33 Ashish

вам нужно будет рестайлинг класса карусельного управления со средствами массовой информации запроса здесь это просто пример код для добавления

@media (max-width: 800px) { 
    .carousel-control{ 
     height:350px; 
    } 
}

источник

2016-09-30 20:41:06 majali

я была такая же проблема с отзывчивой фиксированной высотой. Я использую vh вместо px. В моем случае это работает как шарм

img { 
    height: 85vh; 
    width: 100%; 
    object-fit: cover; // here 
}

источник

2017-03-17 09:23:45

бутстрап, как сделать фиксированную высоту отзывчивой?

ответ

Смежные вопросы