размер изображения увеличен в карусели

Question

Я реализовал карусель с Bootstrap 4. У меня есть две основные проблемы:

1. изображения каким-то образом увеличены. Я не хочу этого.Он должен показывать полный размер изображений.

2. как мне изменить размер карусели?

Вот мой код:

html

<div class="carousel-inner">
    <div class="carousel-item active">
        <img src="/images/holz_40.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
            <h1>lorem</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam placeat esse dicta eos ex nobis, error, corrupti optio aspernatur debitis iure ut sapiente minima exercitationem inventore maiores explicabo natus vitae..</p>
        </div>
    </div>

css:

      .carousel {
        margin-bottom: 4rem;
        position: relative;    
      }       

      .carousel-caption {
        bottom: 3rem;
        z-index: 10;
      }

  .carousel-item {
    height: 32rem;
  }    

     .carousel-item > img {
        position: absolute;
        top: 0;
        left: 0;    
        height: 32rem;
        object-fit: cover;    
      }

Может кто-нибудь помочь мне с тем, как показать изображения в оригинальном размере и изменить размеркарусели?

Буду признателен за вашу помощь!

Answer 1

Я думаю, это может быть связано со свойством object-fit:cover вашего .carousel-item > img правила.

В соответствии с документацией MDN :

Обложка: заменяемое содержимое имеет размер, соответствующий его пропорциям, при заполнении всего поля содержимого элемента.Если соотношение сторон объекта не соответствует соотношению сторон его блока, то объект будет обрезан для соответствия.

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

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

.carousel {
        margin-bottom: 4rem;
        position: relative;   
        
      }       
      
      .carousel-inner {
        background: red;
      }

      .carousel-caption {
        bottom: 3rem;
        z-index: 10;
      }

  .carousel-item {
    height: 32rem;
  }    

     .carousel-item > img {
        position: absolute;
        top: 0;
        left: 0;    
        height: 32rem;
        object-fit: contain;    
      }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<dic class="carousel">
<div class="carousel-inner" >
    <div class="carousel-item active">
        <img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg" class="d-block w-100" alt="...">
        <div class="carousel-caption d-none d-md-block">
            <h1>lorem</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam placeat esse dicta eos ex nobis, error, corrupti optio aspernatur debitis iure ut sapiente minima exercitationem inventore maiores explicabo natus vitae..</p>
        </div>
    </div>
</div>