Wordpress-Woocmmerce-自定义主题-如何正确管理响应图像和纵横比？

我需要关于响应图像和纵横比的技术/概念建议

我正在制作一个电子商务，我需要在商店页面中——所有显示产品网格的页面，而不是单个产品页面——出于设计原因，图像以10:12（宽：高）的纵横比显示。 我还需要设置图像，以便根据设备视口的宽度将照片下载为尽可能轻（kb）

对于light图像的下载，我了解到有srcset，并且wordpress默认实现它们。如果有人已经使用了它们，那么是修改它们更好，还是以一种有意义的方式设置它们更好？ 对于纵横比，我看到在“定制wordpress->woocommerce->images product”面板中，您可以设置纵横比，即使将来需要更改设计，您也可以动态更改纵横比。 此外，在“仪表板->设置->媒体”中，您可以更改图像的大小，也可以在此处动态更改

我不清楚如何管理所有这些相互共存的可能性

考虑到我想要得到什么，我需要找出在以下两者之间选择哪种方式：

1-实现所有功能（在代码和wordpress仪表板设置方面，您将如何做到这一点？），以便在插入新产品时，在加载到wordpress库之前，无需使用photoshop裁剪图像，即使是从以1:1的比例加载的图像开始。 然后在“customize->Woocommerce->products images”中设置“fixed aspect ratio”，并上传图像，就好像没有明天一样

2-强迫自己用我在wordpress（photoshop）外部选择的纵横比来准备图像，并将它们以正确的比例加载到wordpress中。 然后在“定制->Woocommerce->产品图片”中设置纵横比“无裁剪”

3-还有其他想法吗

显然，当我必须上传新产品时，我更愿意浪费尽可能少的时间，所以最好是第一种方式

目前，我的css没有给出任何关于图像应该如何显示的指示，但是它们根据容器的宽度（宽度为px的flex父对象）调整了大小（flex grow:1）

对不起，问题太复杂了，我尽量说清楚：）

我的设置是Wordpress-Woocommerce-Child主题

---

我的父主题添加以下内容：

添加主题支持（“张贴缩略图”）；
添加图片大小（“收银员博客”，640）；
添加图像大小（“收银台全宽”，1040）；
添加主题支持（'woocommerce'，数组(
“缩略图图像宽度”=>432，
“单幅图像宽度”=>560，
) );

我的实际图像的html是：

---

截图：