无法减小图像 div 的大小 - React Js、Tailwind答案

【问题标题】：Could not reduce the size of the Image div - React Js , Tailwind无法减小图像 div 的大小 - React Js、Tailwind
【发布时间】：2021-11-09 09:22:07
【问题描述】：

我正在尝试克隆 Book My show Application。我正在构建演员和工作人员滑块。我尝试减小图像的大小，但图像之间的间距似乎没有减小。

这是我的 js 文件，其中包含 src，滑块的设置：

import React from "react";
import Slider from "react-slick";

import CastPoster from "../MovieCast/movieCast.component";

const Cast = (props) => {
 
    const settings = {
        infinite: true,
        autoplay: false,
        speed: 1500,
        slidesToShow: 4,
        slidesToScroll: 2,
        InitialSlide: 0,
    }
    
    const CastImages = [
        {
            src:"https://in.bmscdn.com/iedb/artist/images/website/poster/large/simu-liu-2006167-13-05-2021-04-13-21.jpg",
            name:"Simu Liu",
            role:"as Shang-Chi"
        },

        {
            src:"https://in.bmscdn.com/iedb/artist/images/website/poster/large/awkwafina-1093500-20-06-2018-12-05-44.jpg",
            name:"Awkwafina",
            role:"as Katy"
        },

        {
            src:"https://in.bmscdn.com/iedb/artist/images/website/poster/large/tony-leung-iein105711-02-04-2018-13-07-58.jpg",
            name:"Tony Leung Chiu-wai",
            role:"as Wenwu / The Mandarin"
        },

        {
            src:"https://in.bmscdn.com/iedb/artist/images/website/poster/large/michelle-yeoh-1473-24-03-2017-17-32-23.jpg",
            name:"Michelle Yeoh",
            role:"as Jiang Nan"
        }
    ];
    
    return (
        <>
        <div className="">
            <Slider {...settings}>
                {
                    CastImages.map((data) => (
                        <CastPoster {...data} />
                    ))
                }
            </Slider>  
        </div>
        </>
    )
};

export default Cast;

这是包含滑块渲染的js文件：

import React from "react";

const CastPoster = (props) => {
    return (
        <>
        <div className="">
                <img className="rounded-full w-32 h-32 " src={props.src} atl={props.name} />
            <div>
                <h3> {props.name} </h3>
                <p> {props.role} </p>
            </div>
        </div>
        </>
    );
};

export default CastPoster;

我已将它作为一个组件添加到页面中：

import React from "react";
import Cast from "../components/Cast/Cast.component";
import MovieHero from "../components/MovieHero/MovieHero.component";
import offerIcon from "./offericon.png";


const MoviePage = () => {
    return (
        <>
        <MovieHero />
        <div className="my-12 container px-4 lg:w-3/4 lg:ml-20">
            <div className="flex flex-col items-start gap-3">
                <h2 className="text-gray-800 font-bold text-2xl"> About the movie </h2>
                <p> Shang-Chi and The Legend of The Ten Rings features Simu Liu as Shang-Chi, who must confront the past he thought he left behind when he is drawn into the web of the mysterious Ten Rings organization. The film is directed by Destin Daniel Cretton and produced by Kevin Feige and Jonathan Schwartz.</p>
            </div>
            <div className="my-8">
                <hr />
            </div>
            <div>
                <h1 className="text-gray-800 font-bold text-2xl pb-4"> Applicable Offers </h1>
                <div className="flex items-start gap-2 bg-yellow-100 border-yellow-400 border-2 border-dashed rounded-md p-3 w-96">
                    <img className="h-6" src={offerIcon}/>
                    <div className="flex flex-col items-start">
                        <h3 className="relative -top-1 text-gray-900 text-md font-semibold"> Filmy Pass </h3>
                        <p className="text-gray-600 -top-1 text-sm"> Get Rs.75* off on 3 movies you buy/rent on Stream. Buy Filmy Pass @Rs.99 </p>
                    </div>
                </div>
            </div>
            <div className="my-8">
                <hr />
            </div>
            <div>
                <h3> Cast </h3>
                <div>
                    <Cast />
                </div>
            </div>
        </div>
        </>
    )
};

export default MoviePage;

结果： This is the result of the code

我想缩小图像之间的间距。谢谢。

【问题讨论】：

标签： javascript html css reactjs tailwind-css

【解决方案1】：

图像之间的间距取决于您要显示的幻灯片数量和滑块 div 的宽度。要减小图像之间的间距，请减小滑块的宽度或显示更多图像。

您的 Cast 组件可能如下所示

<div className="w-full">
    <Slider {...settings} className="w-1/2">
        {
            CastImages.map((data) => (
                <CastPoster {...data} />
            ))
        }
    </Slider>
</div>

【讨论】：