Підтримуйте співвідношення сторін зображення в каруселі

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

Як я можу це змінити?

Ось мій код:

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

http://jsfiddle.net/DRQkQ/

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

Я спробував містити зображення в div і додати

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

Але це не працює

Дякую!

40

8 Відповіді

Проблема виникає тут, на 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; внизу. Це значення за замовчуванням макс-ширини і не встановлює ліміт.

Here's your fiddle updated.

36
додано
Кращий спосіб полягає у використанні фонового розміру: покриття власності, як зазначено у відповіді нижче. Це дозволить зберегти співвідношення сторін зображення незалежно від того, як ви змінюєте розмір екрану.
додано Автор alchuang, джерело
Це працює, спасибі! Однак при зміні розміру сторінки зображення не зосереджено, але це не має значення.
додано Автор Vilarix, джерело

Я вважаю, що краще працювати з атрибутом CSS3 object-fit .

Якщо у вас є зображення з фіксованою шириною і висотою, і якщо ви хочете зберегти співвідношення сторін, ви можете використовувати fit-fit: contain; . Він підтримуватиме співвідношення з заданою висотою і шириною.

Наприклад :

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

You can find more details here : http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

Сподіваюся, що це буде корисно для когось.

26
додано
object-fit: contains; виправлено проблему для мене. Дякую!
додано Автор Adrian, джерело
@Adrian ласкаво просимо! :)
додано Автор Dev, джерело

Видаліть тег 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;
}
11
додано

to maintain aspect ratio & full coverage of carousel div:

img {
object-fit: cover;
overflow: hidden;
    }
3
додано

Я зміг досягти цього, коментуючи лінію висоти з лінії carousel.css, як показано нижче:

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

Цей код нарешті працював для мене:

.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;
}
3
додано
додавання height: none до .carousel-internal> .item> img працює для мене
додано Автор CrandellWS, джерело
Якщо мені потрібно max-height 500px?
додано Автор nim, джерело

Як згадували інші, css3 добре працює для цього. Я використовував повну ширину, фіксовану висоту для контейнера, потім масштабував зображення, зберігаючи співвідношення сторін із "обкладинкою", а потім викинув переповнення

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

Мабуть, вищезгадані рішення не працюють для мене (я не знаю, чому?), Але я знайшов інший обхідний шлях, використовуючи 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();
        }



    }

Здається, для мене працює добре.

Сподіваюся, що це працює для вас теж.

Ви можете або встановити співвідношення сторін, або скористатися іншим методом. По-перше, встановіть ширину та висоту вікна в розмірний вигляд, де зображення добре відформатовано. Запитуйте по ширині і висоті, і відпрацюйте співвідношення. Поверніть вікно назад до початкової ширини та висоти. Користувач зовсім не помітить змін, але розміри записуються.

1
додано