Question

我创建了一个图像悬停，当我将鼠标悬停覆盖文本图像时屏幕上出现了一些文本，该图像显示了图像响应，我想在更改屏幕大小时将文本宽度设置为等于图像宽度，文本宽度应随图像而变化宽度，请帮帮我 i'm using this css lib 我如何创建获取图像宽度并将其设置为文本宽度的函数？

const About = () => {
    return (
        <div className="bucket">
            <div class="row">
                <div class="col-sm-8 mainOne">
                <figure class="imghvr-shutter-in-horiz">
                <h1 className=" text animated bounceInLeft delay-2s">A Front-End Dev...</h1>
                    <figcaption>

                    <img 
                 className="responsive"
                    src="https://netbramha.com/wp-content/uploads/2016/12/senior-front-end-developer-openings-1.gif"/>
                    </figcaption>
                </figure>

                </div>
                <div class="col-sm-4 mainTwo">
                    <div className="col">sub one</div>
                    <div className="col">sub two</div>
                </div>
            </div>
        </div>
    )
}

CSS

 .responsive {
    width: 100%;
    height: auto;
  }

Answer 1

您可以使用可用的课程填充

.responsive{
   width: -webkit-fill-available;
}

Answer 2

<Image
   style={{flex:1, height: undefined, width: undefined}}
   source={require('../../../assets/images/onboarding-how-it-works.png')}
   resizeMode="contain"
/>

屏幕尺寸变化时如何获得图像宽度反应？

2 个答案: