我需要有关响应式图像和纵横比的技术/概念建议。
我正在做一个电子商务，我需要在商店页面中 - 所有显示产品网格但不显示单个产品页面的页面 - 出于设计原因，图像以 10:12（宽度：高度）的纵横比显示. 我还需要设置图像，以便根据设备视口的宽度将照片下载为尽可能轻（以 kb 为单位）。
对于轻图像的下载，我读到有 srcset，并且 wordpress 默认实现了它们。如果有人已经使用它们，是修改它们更好，还是它们已经以有意义的方式设置？对于纵横比，我看到在“自定义 wordpress -> woocommerce->图像产品”面板中，您可以设置纵横比，即使将来您必须更改设计，您也可以随时更改它。此外，在“仪表板 -> 设置 -> 媒体”中，您可以更改图像的大小，也可以在此处即时更改。
我不清楚如何管理所有这些相互共存的可能性。
考虑到我想得到什么，我需要弄清楚在以下情况之间采取哪种方式：
1 - 实现一切（您将如何在代码和wordpress-dashboard设置方面做到这一点？）以便在插入新产品时无需在加载到wordpress库之前使用photoshop裁剪图像，即使从加载的图像开始比例 1:1。然后在“自定义 -> Woocommerce -> 产品图像”中设置“固定纵横比”并上传图像，就好像没有明天一样。
2 - 强迫自己准备具有我在wordpress（photoshop）外部选择的纵横比的图像，并以正确的比例将它们加载到wordpress中。然后在“自定义 -> Woocommerce -> 产品图片”中设置纵横比“无裁剪”。
3 - 还有其他想法吗？
显然，当我必须上传新产品时，我宁愿浪费尽可能少的时间，所以最好是第一种方式......
目前我的css没有给出图像应该如何显示的任何指示，但它们会根据容器的宽度（flex-parent，宽度为 px）调整大小（flex-grow：1）。
抱歉这个问题太复杂了，我尽量说清楚:)
我的设置是 Wordpress - Woocommerce - 儿童主题。
我的父主题添加了这些：
add_theme_support( 'post-thumbnails' );
add_image_size( 'cashier-blog', 640 );
add_image_size( 'cashier-full-width', 1040 );
add_theme_support( 'woocommerce', array(
'thumbnail_image_width' => 432,
'single_image_width' => 560,
) );
我的实际图像的 html 是：
<img width="432" height="528"
src="album-1-432x528.jpg"
class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"
alt=""
srcset="
album-1-432x528.jpg 432w,
album-1-500x611.jpg 500w"
sizes="
(max-width: 432px) 100vw,
432px">
截图：
