React.js, Bootstrapを使用して3枚の写真を図のように配置したいです。

Question

画像を写真のようなレイアウトでページのセンターに配置したいのですがうまくいかず詰まっています。

現在、実装できている配置はこのようになります。

import React from "react";
import Bio4 from "../Images/bio4.jpg";
import Bio3 from "../Images/bio3.jpg";
import Bio1 from "../Images/bio1.jpg";
import { Container, Row, Col } from "react-bootstrap";
import "../Styles/Bio.css"

const Bio = () => {

return(
  <Container>
    <Row xs={1} md={2}>
    <Col><img src={Bio4}  id="caset" className="rounded mx-auto d-block" width="300" alt="..." /></Col>
    <Col><img src={Bio3} id="live" className="rounded mx-auto d-block" width="600" alt="..." /></Col>
    <Col><img src={Bio1} id="person" className="rounded mx-auto d-block" width="300" alt="..." /></Col>
    
  </Row>
  </Container>
)

}

export default Bio

どなたかご教授頂ければと思います。
よろしくお願いいたします。

Comments

[hoshi-takanori]

画面が大きい場合に余白をどうしたいかとか、画面が小さい場合はとか、左側の画像の高さをどうしたいかとか、いろいろ謎ですね…。