只有 <img> 的宽度在 reactjs 中不起作用

Question

我尝试了两种样式设置方法，第一种是内联样式，另一种是将“mystyle”声明为对象并将其作为 style={myStyle} 和 m 使用 react-bootstrap/Carousel 传递

<Carousel.Item>
     <img
      className="d-block w-100"
      src={img1}
      style={{ height: "100px", width: "50%" }}
      alt="First slide"
     />
     <Carousel.Caption>
        <h3>First slide label</h3>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
     </Carousel.Caption>
</Carousel.Item>

Answer 1

img 标签有 width 和 height 属性，你需要使用它们而不是 style prop

    <img
       className="d-block w-100"
       src={img1}
       width="500px"
       height="100%" //if you don't give height attribute then it will always be 100%
       alt="First slide"
       />

Answer 2

您可以使用 CSS 更改轮播容器中的特定图像。给 React-Bootstrap Carousel 组件一个类名，然后根据您的喜好调整图像或更改整个容器大小以匹配您的规格。祝你好运！

.carousel-container {
    position: relative;
    max-width: 400px;
    max-height: 300px;

     .carousel {
        .slide {
            img {
                height: 100%;
                width: auto;
            }
         }
      }
   }