画像

クラスを介してレスポンシブな動作（親要素よりも幅広くなることがない）のオプションを画像に設定し、軽量のスタイルを追加するためのドキュメントと例。

形

画像をカスタマイズするには、rounded、roundedCircle、thumbnailプロパティを使用します。

結果

読み込み中...

ライブエディター

import Col from 'react-bootstrap/Col'; import Container from 'react-bootstrap/Container'; import Image from 'react-bootstrap/Image'; import Row from 'react-bootstrap/Row'; function ShapeExample() { return ( <Container> <Row> <Col xs={6} md={4}> <Image src="holder.js/171x180" rounded /> </Col> <Col xs={6} md={4}> <Image src="holder.js/171x180" roundedCircle /> </Col> <Col xs={6} md={4}> <Image src="holder.js/171x180" thumbnail /> </Col> </Row> </Container> ); } export default ShapeExample;

import Col from 'react-bootstrap/Col';
import Container from 'react-bootstrap/Container';
import Image from 'react-bootstrap/Image';
import Row from 'react-bootstrap/Row';

function ShapeExample() {
  return (
    <Container>
      <Row>
        <Col xs={6} md={4}>
          <Image src="holder.js/171x180" rounded />
        </Col>
        <Col xs={6} md={4}>
          <Image src="holder.js/171x180" roundedCircle />
        </Col>
        <Col xs={6} md={4}>
          <Image src="holder.js/171x180" thumbnail />
        </Col>
      </Row>
    </Container>
  );
}

export default ShapeExample;

フルード

画像を親要素に対して調整するには、fluidを使用します。

結果

読み込み中...

ライブエディター

import Image from 'react-bootstrap/Image'; function FluidExample() { return <Image src="holder.js/100px250" fluid />; } export default FluidExample;

import Image from 'react-bootstrap/Image';

function FluidExample() {
  return <Image src="holder.js/100px250" fluid />;
}

export default FluidExample;

API

画像