图像尺寸放大了旋转木马

Question

我已经用bootstrap4实现了一个轮播。我有两个主要问题：

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

我认为这可能是由于您的.carousel-item > img规则的属性object-fit:cover。

根据MDN文档：

封面：替换内容的大小是为了维持其长宽比，同时填充元素的整个内容框。如果对象的纵横比与其框的纵横比不匹配，则将剪辑对象以适合。

封面属性在开发响应式门户时具有许多优势，就像您只使用适合大多数公共宽高比的图像。

您可以更改包含的属性，因此可以以正常的纵横比显示，但是您需要在封闭的旋转木马div的尺寸上注意。

.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>