Javascript CSS：不同大小的图像集中在一个响应浮动div列表中

我在一个响应页面中有一个产品列表，每行显示4个产品，页面中所有产品的每个产品的大小应保持不变，但应根据屏幕大小进行调整，即屏幕宽度的25%

范例

.prod{
宽度：25%；
浮动：左；
}
img{
宽度：100%；
}

以下是css flex的部分答案



*{框大小：边框框；边距：0；填充：0；}
.名单{
显示器：flex；
柔性包装：包装；
}
普罗德先生{
宽度：25%；
边框：1px纯黑；
填充：2px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
img{
最大宽度：100%；
}

以下是css flex的部分答案



*{框大小：边框框；边距：0；填充：0；}
.名单{
显示器：flex；
柔性包装：包装；
}
普罗德先生{
宽度：25%；
边框：1px纯黑；
填充：2px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
img{
最大宽度：100%；
}