使产品图片在液体中变大

Question

我目前在 Shopify 中使用 "Debut" 主题。我正在寻找改变产品图片的大小并使它们更大。目前图片的大小为 276x345，我希望将它们调整到 367x550 左右。

当前页面布局为在全尺寸浏览器（非移动设备）上跨页面显示三个产品。

Collection.liquid 目前有以下内容：

  {% case section.settings.grid %}
{% when 2 %}
  {%- assign max_height = 530 -%}
  {%- assign grid_item_width = 'large-up--one-half' -%}
{% when 3 %}
  {%- assign max_height = 345 -%}
  {%- assign grid_item_width = 'small--one-half large-up--two-third' -%}
{% when 4 %}
  {%- assign max_height = 250 -%}
  {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
  {%- assign max_height = 195 -%}
  {%- assign grid_item_width = 'small--one-half medium-up--one-fifth'     -%}
{% endcase %}

在浏览器中检查时，这是 CSS 返回的

  @media screen and (min-width: 750px) { 
    #ProductCardImage-collection-template-1487328739386 {
      max-width: 276.0px;
      max-height: 345px;
    }
    #ProductCardImageWrapper-collection-template-1487328739386 {
      max-width: 276.0px;
      max-height: 345px;
    }
   } 



    @media screen and (max-width: 749px) {
      #ProductCardImage-collection-template-1487328739386 {
        max-width: 600.0px;
        max-height: 750px;
      }
      #ProductCardImageWrapper-collection-template-1487328739386 {
        max-width: 600.0px;
      }
    }

最大 276px 的原因是什么？

如何更改代码以使图片以更大的尺寸加载和显示？

Answer 1

最大宽度的计算方法如下：

{% if image.aspect_ratio < 1.0 %}
    {% assign maximum_width = height | times: image.aspect_ratio %}
    {% if image.height <= height %}
      {% assign maximum_height = image.height %}
      {% assign maximum_width = image.width %}
    {% else %}
      {% assign maximum_height = height %}
    {% endif %}
{% elsif image.aspect_ratio < container_aspect_ratio %}
    {% assign maximum_height = height | divided_by: image.aspect_ratio %}
    {% if image.height <= height %}
      {% assign maximum_height = image.height %}
      {% assign maximum_width = image.width %}
    {% else %}
      {% assign maximum_height = height %}
      {% assign maximum_width = height | times: image.aspect_ratio %}
    {% endif %}
{% else %}
    {% assign maximum_height = height | divided_by: image.aspect_ratio %}
    {% if image.width <= width %}
      {% assign maximum_height = image.height %}
      {% assign maximum_width = image.width %}
    {% else %}
      {% assign maximum_width = width %}
      {% assign maximum_height = maximum_width | divided_by: image.aspect_ratio %}
    {% endif %}
{% endif %}

因此，根据不同的宽高比，您会得到不同的最大宽度计算值。您将需要更新此逻辑或将其完全从您的代码中排除。

使产品图片在液体中变大

Make Product Pictures Larger in Liquid

javascript

liquid-layout

liquid

shopify

shopify-template