具有不同高度的项目的旋转的恒定高度

如何解决具有不同高度的项目的旋转的恒定高度

我有一个具有不同高度图像的 react-bootstrap Carousel。当图片变化时，父元素的高度也在变化，反复打乱整个页面的对齐。

如果不以像素为单位设置高度，我有什么办法可以避免这种情况，因为这会在窗口尺寸较小时产生问题。

              <div>
                <Carousel style={displayImage}>
                  <Carousel.Item style={alignItem}>
                    <img src="https://cdn.shopify.com/s/files/1/1060/9112/products/Covid-19-01_8e003b8d-7115-41a2-b51c-1ef6d249d745_1024x1024.jpg?v=1583432489" />
                  </Carousel.Item>
                  <Carousel.Item style={alignItem}>
                    <img src="https://i.pinimg.com/originals/bb/8d/d1/bb8dd138ae9c8cbb9ad5caab6be7b7bd.png" />
                  </Carousel.Item>
                  <Carousel.Item style={alignItem}>
                    <img src="https://i.pinimg.com/736x/43/29/c2/4329c2824fec2873b5e0569180e482cf.jpg" />
                  </Carousel.Item>
                  <Carousel.Item style={alignItem}>
                    <img src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067__340.png" />
                  </Carousel.Item>
                </Carousel>
              </div>

风格是

var displayImage = {
      maxHeight: "500px",padding: "20px",overflow: "hidden",maxWidth: "300px",verticalAlign: "middle",};

    var alignItem = {
      verticalAlign: "middle",};

解决方法

因为 CSS object-fit 属性用于指定 <img> 或 <video> 应如何调整大小以适合其容器。

使用这个：

<div class="carousel-item ">
      <img src="..." class="d-block w-100 fit" alt="...">
</div>

CSS：

 .fit{
      object-fit:cover;
 }

为您的代码添加：

 var alignimage = {
      object-fit:"cover"
    };

和

<img class={alignimage}
src="https://i.pinimg.com/736x/43/29/c2/4329c2824fec2873b5e0569180e482cf.jpg" />

或

放置内联样式：

 <img style={{object-fit: "cover"}} 
  src="blabblah.png" />