Skip to content

resize fit 'contain' works like 'inside' on sharp ≥ 0.28 #2951

@deyhle

Description

@deyhle

When resizing a very lengthy image to a square using fit: 'contain' to place it resized in the square, it is instead behaving like fit: 'inside' and not respecting the requested output size in one dimension.

Reproducable in sharp 0.29.2. It definitely worked as expected in 0.27.0.

What are the steps to reproduce?

  • resize a JPEG image to a square with a size in-between the largest and the smallest edge of the original image, using fit: 'contain' (Example: input file 1px width, 850px height, resize to 100x100) -> Result image has 100px height, but only 1px width and no letterboxing occurred as expected

What is the expected behaviour?

  • Result image should respect 'contain' behavior, and be letterboxed to match the target width and height.

Are you able to provide a minimal, standalone code sample, without other dependencies, that demonstrates this problem?

const sharp = require('sharp');
const assert = require('assert');

/**
 * input file is a jpg with 1px x 850px
 * expected output is a jpg with 100px x 100px
 */
const INPUT = './1px.jpg';
const OUTPUT = './1px-thumb.jpg';

(async () => {
  const image = await sharp(INPUT);
  const metaInput = await sharp(INPUT).metadata();
  assert.strictEqual(metaInput.height, 850, 'input height is 850px');
  assert.strictEqual(metaInput.width, 1, 'input width is 1px');
  image.resize(100, 100, {
    fit: 'contain',
    background: { r: 255, g: 255, b: 255, alpha: 1 },
  });
  image.jpeg({
    quality: 85,
    chromaSubsampling: '4:2:0',
    progressive: true,
  });
  await image.toFile(OUTPUT);
  const metaOutput = await sharp(OUTPUT).metadata();
  assert.strictEqual(metaOutput.height, 100, 'output height is 100px');
  assert.strictEqual(metaOutput.width, 100, 'output width is 100px');
})();

Error:

AssertionError [ERR_ASSERTION]: output width is 100px
    at ...:27:10 {
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: 1,
  expected: 100,
  operator: 'strictEqual'
}

Are you able to provide a sample image that helps explain the problem?

https://user-images.githubusercontent.com/770621/139036263-ad9d9d1d-b19c-45ac-b99b-22d93c4b5755.jpg
(barely visible, because it is only 1px wide:)

1px

What is the output of running npx envinfo --binaries --system?

  System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 253.30 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.12.0 - ~/.nvm/versions/node/v16.12.0/bin/node
    npm: 8.1.0 - ~/.nvm/versions/node/v16.12.0/bin/npm

also happens on the CI server with

 System:
    OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-3770 CPU @ 3.40GHz
    Memory: 6.55 GB / 31.07 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions