0

我目前在 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？

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

4

1 回答 1

0

使用以下方法计算最大宽度：

{% 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 %}

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

于 2018-06-22T05:16:50.003 回答