javascript - 当屏幕尺寸变化时如何获取图像宽度？

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;
}