Question

我需要有关响应式图像和宽高比的技术/概念建议。

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

对于下载光图像，我读到有srcset，并且wordpress默认实现了它们。如果有人已经使用过它们，是对它们进行修改还是更好地对其进行设置？对于长宽比，我看到在面板“ customize wordpress-> woocommerce-> images product”中，您可以设置长宽比，即使将来需要更改设计，也可以随时更改它。此外，在“仪表板->设置->媒体”中，您可以更改图像的大小，也可以在此处即时更改。

我不清楚如何管理彼此并存的所有这些可能性。

考虑到我想要得到的东西，我需要弄清楚采用哪种方式：

1-实施所有操作（就代码和wordpress-dashboard设置而言，您将如何实现？），以便在插入新产品时不必在装入wordpress库之前使用photoshop裁剪图像，即使从比例为1：1的图像。然后在“自定义-> Woocommerce->产品图片”中设置“固定长宽比”，然后就好像没有明天一样上传图片。

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

3-还有其他想法吗？

很明显，当我不得不上载新产品时，我宁愿浪费尽可能少的时间，因此第一种方式更可取...

目前，我的css没有提供任何有关如何显示图像的指示，但是根据容器的宽度（flex-parent，宽度为px）调整了它们的大小（flex-grow：1）。 / p>

对于这个问题的复杂性，很抱歉，我试图使其尽可能清楚：）

我的设置是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">

屏幕截图：

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

0 个答案: