コノバ画像を親要素の全幅に合わせる

Question

画像をクリックすると、画像に円を重ねる反応成分があります。私は値としてpxlだけを取るように見えるので、イメージのサイズを決める良い方法を見つけることができません。私は親の<Col>要素の全幅にしたいと思います。私は反応 - コンバと反応ブートストラップを使用しています。

import { PageHeader, Grid, Row, Col, 
ListGroup, ListGroupItem, Table, Panel, 
ButtonToolbar, Button, Modal, FormGroup, FormControl, HelpBlock, ControlLabel} 
from 'react-bootstrap'; 

import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table'; 
import {Stage, Layer, Rect, Line, Image, Circle} from 'react-konva'; 

     <Grid> 
      <Row> 
       <PageHeader>System Boards<small> {this.state.name}</small></PageHeader> 
       <Col md={6}> 
        <Stage height="100" width="100"> 
         <Layer> 
          <Image 
           image={this.state.image} 
           height="100"  
           width="100" 
           onClick={ (event) => { 
           this.handleClickImage(event); 
           }} 
           onTap={ (event) => { 
           this.handleClickImage(event); 
           }} 
          /> 
         </Layer> 
         {this.state.moves} 
        </Stage> 
       </Col> 
       <Col md={6}> 

Answer 1

イメージサイジングには、リアブートストラップMedia Contentを使用できます。あなたはキャンバスからイメージの非表示バージョンを持っているので、サムネイルをクリックすると可視性を変更することができます。

Answer 2

でColのサイズを読み取り、イメージの必要なサイズでコンポーネントの状態を更新することができます。このようなもの：

componenentDidMount() { 
    // you can add class or id to Col to find it in the DOM 
    const colEl = document.querySelector('.col-selector'); 
    this.setState({ 
     imageWidth: colEl.offsetWidth, 
     imageHeight: colEl.offsetHeight, 
    }); 
} 

おそらく、あなたはウィンドウのサイズ変更で同じことをする必要があります。