css - Ant Design中具有多种图像大小的轮播

问题描述

我是 ReactJs 的新手，目前正在学习如何使用 Ant Design。我尝试使用 Carousel 组件并遇到了一些问题。当我尝试将一些图像插入轮播时，图像不适合轮播组件的大小。每个图像都有不同的尺寸，我希望它们都适合轮播尺寸。这里的一个例子（原始尺寸：1024x1024）：（第二张图像刚刚获得轮播尺寸宽度的 50%）

<Row gutter={[16,8]}>
                <Col md={14}>
                    <div>
                    <Title level={1}>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Title>
                    <Paragraph> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Fusce ut neque neque. Fusce rutrum pretium mauris et dictum. 
                    Donec ac lacus vel orci rutrum commodo a vel orci. 
                    In aliquet dolor in arcu interdum convallis. 
                    Duis eleifend nibh eros, nec interdum ipsum commodo ut. 
                    Aliquam erat volutpat. Nullam consequat nibh ac diam cursus fermentum. 
                    Sed et nisi nibh. In dolor metus, venenatis sit amet quam sed, iaculis pharetra orci. 
                    Etiam non lacus ac risus pharetra fringilla eu sit amet velit.
                    Pellentesque iaculis arcu eu nisl maximus dapibus.</Paragraph>
                    </div>
                </Col>
                <Col md={10}>
                    <div>
                    <Carousel style={carouselStyle}>
                        <div>
                        <Image src="https://xuongmaydosi.com/wp-content/uploads/2019/09/Fabric-la-ten-goi-tieng-anh-de-chi-mot-tam-vai.jpg" style={{width:'100%'}}></Image>
                        </div>
                        <div>
                        <Image src="https://mooneepondssewing.com/wp-content/uploads/2015/12/homespun-fabrics-melbourne.jpg" fluid></Image>
                        </div>
                    </Carousel>
                    </div>
                </Col>
</Row>

以及我尝试过但不起作用的 CSS

const contentStyle = {
    height:'400px',
    Width:'100px',
    objectFit:'fill',
  };
const carouselStyle ={
    borderRadius:'20px',overflow:'hidden',
    height:'400px',
    background:'teal',
}

App.js 文件：

import "antd/dist/antd.css";
import HomeIntroduction from './components/HomeIntroduction.js';

function App() {
  return (
    <>
      <HomeIntroduction></HomeIntroduction>
    </>

  );
}

我应该怎么做才能解决这个问题？

标签： cssreactjsantd

css - Ant Design中具有多种图像大小的轮播

问题描述

解决方案

推荐阅读