html - 图片大小在轮播中放大

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

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

根据 MDN documentation :

Cover: The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.

当您为响应式门户开发时，封面属性有很多优势，例如您只使用适用于最常见纵横比的图像。

您可以将属性更改为包含，这样图像就可以以正常的纵横比显示，但是您需要注意封闭的旋转木马 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>