【问题标题】:only width on <img> not working in reactjs只有 <img> 的宽度在 reactjs 中不起作用
【发布时间】:2021-08-13 12:16:30
【问题描述】:

我尝试了两种样式设置方法,第一种是内联样式,另一种是将“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>

【问题讨论】:

    标签: html css reactjs react-bootstrap


    【解决方案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"
           />
    

    【讨论】:

    • 也试过这个,但宽度仍然无法正常工作。
    【解决方案2】:

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

    .carousel-container {
        position: relative;
        max-width: 400px;
        max-height: 300px;
    
         .carousel {
            .slide {
                img {
                    height: 100%;
                    width: auto;
                }
             }
          }
       }
    

    【讨论】:

    • 只有 .carousel-container ->max-width,max-height 有效。 img 一个没有工作。并且轮播也在页面上向左移动
    猜你喜欢
    • 1970-01-01
    • 2013-07-22
    • 2011-04-24
    • 2011-05-21
    • 2018-09-20
    • 1970-01-01
    • 2015-01-25
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多