Поддерживать соотношение сторон изображения в карусели

Я использую Bootstrap для создания карусели, у меня большие изображения, поэтому, когда экран меньше изображения, соотношение не сохраняется.

Как я могу это изменить?

Вот мой код:

.carousel .item {
  height: 500px;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

http://jsfiddle.net/DRQkQ/

Мне нужно, чтобы изображение соответствовало ширине 100%, но его высота 500 пикселей (я думаю, это 500 пикселей) это должно означать, что на меньшем экране мы не видим крайнего левого и правого края изображения.

Я попытался содержать изображение в div и добавить

overflow: hidden;
width: 100%;
height: 500px;
display: block;
margin: 0 auto;

Но это не работает

Спасибо!

Ответ 1

Проблема здесь, на bootstrap CSS:

img {
  max-width: 100%;
  width: auto   9;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

Установив max-width: 100%;, изображение не будет больше, чем область просмотра. Вы должны переопределить это поведение в своем CSS:

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
  max-width: none;
}

Обратите внимание на max-width: none;, добавленный внизу. Это значение максимальной ширины по умолчанию и отключает ограничение.

Здесь обновлена ваша скрипка.

Ответ 2

Я думаю, что лучше обработать его с помощью атрибута CSS3 object-fit.

Если у вас есть изображение с фиксированной шириной и высотой, и если вы хотите сохранить соотношение сторон, вы можете использовать object-fit:contain;. Он будет поддерживать соотношение с заданной высотой и шириной.

Например:

img {
        height: 100px;
        width: 100px;
        object-fit: contain;
}

Здесь вы можете найти более подробную информацию: http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

Надеюсь, это будет полезно кому-то.

Ответ 3

Удалите тег img внутри элемента карусели и добавьте фон. Таким образом вы можете использовать свойство крышки CSS3.

.item1 {
    background: url('bootstrap/img/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Ответ 4

Я смог добиться этого, прокомментировав линию высоты линии carousel.css, как показано ниже:

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  /*height: 500px;*/
}

Ответ 5

Этот код, наконец, работал у меня:

.carousel .item {
    background:#F9F9F9;
    border:1px solid #E0E0E0;
    overflow:hidden;
    margin-bottom:1em;
    margin-top:1em;
    padding:5px;
}
.carousel-inner > .item > img {
    border: 1px solid #DDDDDD;
    float: left;
    margin: 0pt 3px;
    padding: 2px;
    height: none;
    width:  100%;
}

.carousel-inner > .item > img:hover {
    border: 1px solid #000000;
}

Ответ 6

для поддержания соотношения сторон и полного охвата карусельного div:

img {
object-fit: cover;
overflow: hidden;
    }

Ответ 7

По-видимому, вышеупомянутые решения не сработали для меня (я не знаю почему?), но я нашел другое обходное решение, использующее javascript.

В принципе, это более утомительный метод, но также работает. Вы используете jQuery для установки высоты карусели по ширине, разделенной на определенный формат.

Вот мой код:

    var aspectRatio = 2.5; //Width to Height!!!
    var imageWidth;
    var imageHeight;

    //bind the window resize event to the method - 
    //change in carousel width is only triggered when size of viewport changes
    $(window).on("resize", methodToFixLayout);

    //updates the carousel width when the window is resized
    function methodToFixLayout(e){

        imageWidth = carousel.width();
        console.log("");
        console.log("Method width" + imageWidth);
        console.log("");

        imageHeight = imageWidth / aspectRatio;

        carouselContainer.height(imageHeight);    
        carousel.height(imageHeight);
        carouselPic.height(imageHeight);

         //solve the carousel glitch for small viewports - delete the carousel
        windowWidth = $(window).width();
        if (windowWidth < 840){
            carousel.hide();
            $("#side-navbar").hide();
        } else {
            carousel.show();
            $("#side-navbar").show();
        }



    }

Кажется, это работает для меня хорошо.

Надеюсь, что это сработает и для вас.

Вы можете либо установить соотношение сторон самостоятельно, либо использовать другой метод. Во-первых, установите ширину и высоту окна в размер представления, где изображение выглядит хорошо отформатированным. Запросите ширину и высоту и определите соотношение. Верните окно обратно к исходной ширине и высоте. Пользователь не заметил бы изменения вообще, но размеры будут записаны.

Ответ 8

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

.carousel .carousel-inner img {
  width: 100%;
  height: 30em;
  object-fit: cover;
  overflow: hidden;
}