图片

有关将图片设置为响应式行为（使其永远不会比其父元素更宽）并通过类为其添加轻量级样式的文档和示例。

形状

使用 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

图片