时间戳

首页 > 解决方案 > 如何按固定因子缩放 Gatsby 图像？

javascript - 如何按固定因子缩放 Gatsby 图像？

问题描述

我正在为一位艺术家建立一个 gatsby 博客，这意味着我必须展示画作。我的客户要求在共享比例因子的同时显示这幅画。我的意思是，一幅画在现实生活中的宽度是另一幅画的两倍，在网站上应该是另一幅的两倍大。我尝试并听说过多种方法，但没有一个真正适合我。我尝试过的最方便的方法是：

  1. 使用zoom css 属性，但 Firefox 不支持
  2. 使用transform: scale属性

所以我想知道是否有一种方法可以相对于原始文件尺寸将所有查询的图像按一个因子缩放。

query galeryQuery($slug: String!) {
  allWpMediaItem(filter: {wpParent: {node: {slug: {eq: $slug}}}}) {
    edges {
      node {
        title
        description
        localFile {
          childImageSharp {
            gatsbyImageData(/* Probably something needed here */)
          }
        }
      }
    }
  }
}

我当前的查询看起来像这样，我尝试使用outputPixelDensities、断点和其他一些参数，但似乎没有一个有效。

先感谢您。

标签： javascriptcssreactjsgatsby

解决方案

推荐阅读