css中的图像宽度问题

Question

我有 3 张图像，它们应该并排出现在一行中。然而，第一张图像很大，它将其他两个图像推到了我不想要的下一行。我已经创建了一个类并添加了高度和宽度，但它不起作用

HTML code:

<div className="workImgs">
            <a href="https://github.com/aditya803/Flappy_Bird" target="_blank"><img src={FlappyBird} alt="" className="workImg" /></a>
            <a href="https://github.com/aditya803/flutter_firebase" target="_blank"><img src={BrewCrew} alt="" className="workImg" /></a>
            <a href="https://github.com/aditya803/news_app" target="_blank"><img src={NewsApp} alt="" className="workImg" /></a>
        </div>


CSS code:
.workImgs{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100vw;
    max-width: 100rem;    
}

.workImg{
    object-fit: cover;
    height: 20rem;
    margin: 0.5rem;
}

这是结果 UI。我希望第一个 img 宽度等于其余 2 个，以便它们可以位于 1 行中。已尝试为大图像创建差异 ID，但没有成功。

Answer 1

尝试从 .workImgs 选择器中删除

flex-wrap: wrap;

图像应该连续出现