Блог

Я новичок в ReactJS и в настоящее время учусь использовать дизайн муравьев. Я попытался использовать компонент «Карусель» и столкнулся с некоторыми проблемами. Когда я попытался вставить некоторые изображения в Карусель, изображения не соответствуют размеру компонента Карусели. Каждое изображение имеет разные размеры, и я хочу, чтобы все они соответствовали размеру карусели. Один пример здесь (исходный размер:1024×1024): (второе изображение только что получило 50% ширины размера карусели)

 lt;Row gutter={[16,8]}gt;  lt;Col md={14}gt;  lt;divgt;  lt;Title level={1}gt;Lorem ipsum dolor sit amet, consectetur adipiscing elitlt;/Titlegt;  lt;Paragraphgt; 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.lt;/Paragraphgt;  lt;/divgt;  lt;/Colgt;  lt;Col md={10}gt;  lt;divgt;  lt;Carousel style={carouselStyle}gt;  lt;divgt;  lt;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%'}}gt;lt;/Imagegt;  lt;/divgt;  lt;divgt;  lt;Image src="https://mooneepondssewing.com/wp-content/uploads/2015/12/homespun-fabrics-melbourne.jpg" fluidgt;lt;/Imagegt;  lt;/divgt;  lt;/Carouselgt;  lt;/divgt;  lt;/Colgt; lt;/Rowgt;  

и 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 (  lt;gt;  lt;HomeIntroductiongt;lt;/HomeIntroductiongt;  lt;/gt;   ); }  

Что я должен сделать, чтобы решить эту проблему?

попробуйте это

 lt;Image src="another-img" fluid /gt;