ReactJS 中的卡樣式

Question

我正在做一個招聘頁面項目來練習 React，但我無法找到正確設置這些卡片樣式的方法

我想以某種方式設置這些卡片的樣式（對不起，我還不能發布圖像），當我調整頁面大小、檢查元素、在移動視圖中打開等時，它會自行調整大小，而不是 go 超出主要尺寸頁。

卡片組件代碼

const Card = () => {
    return openingData.map((el) => {
        return (
            <div className="card-container card">
                <div className="positions-container">{el.positions}</div>
                <div className="image-container">
                    <img src={el.logo} alt="" height="375" width="475" />
                </div>
                <div className="card-content">
                    <div clasName="title-container">
                        <b>
                            <h3>{el.title}</h3>
                        </b>
                    </div>
                    <div className="message-container">
                        <h5>{el.message}</h5>
                    </div>
                </div>
                <div className="button-container">
                    <button className="buttons btn">Join Now!</button>
                </div>
            </div>
        );
    });
};

卡片列表組件的代碼

const CardList = () => {
    return (
        <div className="card-list">
            <Card />
        </div>
    );
};

CSS

.card-container {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(1, 1, 1, 0.922);
    border-radius: 25px;
    padding: 25px;
    cursor: pointer;
    transform: translateZ(0);
    transition: transform 0.25s ease-out;
}

.card-container:hover {
    transform: scale(1.05);
}

.card-list {
    width: 85vw;
    margin: 0 auto;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

Answer 1

您需要全局添加

   img {
     max-width: 100%;
   }

Answer 2

為您的card.container提供適當的尺寸，以便所有內容都可以通過指定max-width來擁有它們的邊界