Question

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

图像以某种方式放大了。我不想要那样。它应该显示图像的完整大小。
如何更改轮播的大小？

这是我的代码：

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 documentation：

封面：在填充元素的整个内容框的同时，调整大小以保持其长宽比不变。如果对象的长宽比与框的长宽比不匹配，则对象将被裁剪以适合对象。

在为响应式门户进行开发时，Cover属性具有许多优势，例如您仅使用了适用于大多数常见长宽比的图像。

您可以将属性更改为包含，以便可以以正常的宽高比显示图像，但随后需要注意旋转木马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>

图像大小在轮播中放大

1 个答案: