Как получить ширину изображения при изменении размера экрана?

Question

Я создал всплывающее окно с изображением. При наведении указателя мыши на текст появляется изображение, изображение становится отзывчивым. Я хочу установить ширину текста, равную ширине изображения, при изменении размера экрана ширина текста должна изменяться вместе с изображением ширина, пожалуйста, помогите мне Я использую эту библиотеку CSS Как я могу создать функцию, чтобы получить ширину изображения и установить его ширину текста?

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"
/>