最小化图像从CSS位置向下移动

我在react上创建了这个简单的博客。一张大图和三张小图在旁边。这在桌面上很好，但当我最小化主图片时效果很好，但小图片向下移动会扭曲整个视图

这个。

这是完全最小化。

我尝试了相对和绝对的位置，但没有效果

请引导

这是HTML

    <Card>
            <div className='galleryPost'>
                <section style={{width: '70%'}}>
                    <NavLink to={`/post/${nangaparbatStuff.slug}`}>
                    <div>
                        <img src={`${nangaparbatStuff.blogImage}`} alt=''/>
                    </div>
                    </NavLink>
                </section>


                <section className='sideImageWrapper' style={{width: '30%', float: 'right'}}>
                    <NavLink to={`/post/${saralStuff.slug}`}>
                    <div className='sideImageHeight'>
                        <img src={`${saralStuff.blogImage}`} alt=''/>
                    </div>
                    </NavLink>

                    <NavLink to={`/post/${chittakathaStuff.slug}`}>
                    <div className='sideImageHeight'>
                        <img src={`${chittakathaStuff.blogImage}`} alt=''/>
                    </div>
                    </NavLink>

                    <NavLink to={`/post/${sheosarStuff.slug}`}>
                    <div className='sideImageHeight'>
                        <img src={`${sheosarStuff.blogImage}`} alt=''/>
                    </div>
                    </NavLink>
                </section>              
            </div>  
        </Card>

试试这个：

.leftImage{
宽度：70%；
浮动：左；
}
.rightImages{
宽度：30%；
浮动：对；
}
.形象{
宽度：100%；
}

能否将代码作为工作片段？你可以使用引导网格来定义图像在不同分辨率下的显示方式。没有HTML，引用CSS是毫无意义的。请提供您的HTML以及。最好是将Html添加到问题中，您是否尝试过我的解决方案？它没有像预期的那样工作？它确实工作了小图像现在是有响应的，但是它们正在脱离块。如何解决这个问题？我试着给它们命名为smallImg并固定高度，但这再次引发了前一个问题。抱歉，如果我问了一些愚蠢的问题，但我是一个初学者，我确实尝试过。rightImages img{height:235px；}它最初是有效的，但当我尝试最小化时，它一开始没有响应，所以大图像变小了，但三个没有但是，它再次变得响应迅速，但顺序不正确。因此，您想根据左侧调整右侧图像以适应吗？例如，如果左侧高度为900像素，则其他高度必须为300像素？

.galleryPost{
    display: flex;
    justify-content: space-between;

}
.galleryPost img{
    width: 100%;   
}
sideImageWrapper div{
    position: relative;
    padding: 1px;
    box-sizing: border-box;
    max-width: 100%;
}
.sideImageWrapper img{
    position: relative;
    object-fit: cover;
    max-height: 100%;
}

.sideImageHeight{
      height: 235px;
  }