Merge pull request #681 from simonihmig/support-aspect-ratio

Support aspect ratio parameter correctly

.changeset/breezy-bats-attend.md

@@ -0,0 +1,8 @@
+---
+'@responsive-image/vite-plugin': patch
+'@responsive-image/webpack': patch
+---
+
+Support `aspect` ratio parameter correctly
+
+When `aspect` is given (via import query params), the height of the image is adjusted to match when resizing, and the image component will correctly render with the new aspect ratio, rather than that of the original image.

apps/docs/src/usage/local-images.md

@@ -96,7 +96,7 @@ import image from 'image.jpg?blur=100&responsive';
 
 #### `fit: 'cover' | 'contain' | 'fill' | 'inside' | 'outside'`
 
-When both width and height are provided, this parameter specifies the method to fit the image into the given dimensions.
+When `aspect` is provided (which adjust the height, while width is always given implicitly), then this parameter specifies the method to fit the image into the given dimensions.
 
 ```js
 import image from 'image.jpg?fit=cover&responsive';
@@ -178,10 +178,9 @@ import image from 'image.jpg?normalize&responsive';
 
 #### `position: string`
 
-When both `width` and `height` are provided AND the fit is one of `fit` of `cover` or `contain`, this parameter can be
-used to set the position of the image.
+When `aspect` is provided and `fit` is one of `cover` or `contain`, then this parameter can be used to set the position of the image.
 
-See sharps [resize options](https://sharp.pixelplumbing.com/api-resize#resize) for a detailed explanation of each.
+See sharp's [resize options](https://sharp.pixelplumbing.com/api-resize#resize) for a detailed explanation of each.
 
 #### `quality: number`
 
@@ -198,7 +197,7 @@ Resizes the image to be the specified amount of pixels wide. If not given the he
 ```js
 import image from 'image.jpg?w=200&responsive';
 import image from 'image.jpg?w=200;400;700&responsive';
-``` -->
+```
 
 #### `h: number`
 
@@ -207,22 +206,16 @@ Set the height explicitly. Usually this is derived from the image's aspect ratio
 ```js
 import image from 'image.jpg?h=200&responsive';
 import image from 'image.jpg?h=200;400;700&responsive';
-```
+``` -->
 
-<!-- #### `aspect: _string_ \| _number_`
+#### `aspect: string | number`
 
-Resizes the image to be the specified aspect ratio. Aspect ratio can be defined with a string in the form `16:9` or a
-positive number representing the width divided by height (e.g., `1.5` for a `3:2` aspect ratio) If height and width are
-both provided, this will be ignored. If height is provided, the width will be scaled accordingly. If width is provided,
-the height will be scaled accordingly. If neither height nor width are provided, the image will be cropped to the given
-aspect ratio.
+Adjust the height of the image (width is always given implicitly) to match the specified aspect ratio. The value can be a string in the form `16:9` or a positive number representing the width/height ratio.
 
 ```js
 import image from 'image.jpg?aspect=16:9&responsive';
-import image from 'image.jpg?aspect=16:9&h=200&responsive';
-import image from 'image.jpg?aspect=16:9&w=200&responsive';
-import Images from 'image.jpg?aspect=16:9&h=200;400;700&responsive';
-``` -->
+import image from 'image.jpg?aspect=1.5&responsive';
+```
 
 <!-- ### Without# `withoutEnlargement: boolean`
 

apps/ember-vite/app/controllers/index.js

@@ -1,12 +1,16 @@
 import Controller from '@ember/controller';
-import dogImage from '../images/aurora.jpg?responsive';
-import dogImageLqipColor from '../images/aurora.jpg?lqip=color&responsive';
-import dogImageLqipInline from '../images/aurora.jpg?lqip={"type":"inline","targetPixels":16}&responsive';
-import dogImageLqipBlurhash from '../images/aurora.jpg?lqip={"type":"blurhash","targetPixels":16}&responsive';
+import image from '../images/aurora.jpg?responsive';
+import imageLqipColor from '../images/aurora.jpg?lqip=color&responsive';
+import imageLqipInline from '../images/aurora.jpg?lqip={"type":"inline","targetPixels":16}&responsive';
+import imageLqipBlurhash from '../images/aurora.jpg?lqip={"type":"blurhash","targetPixels":16}&responsive';
+import imagePortrait from '../images/aurora.jpg?aspect=2:3&responsive';
+import imageGray from '../images/aurora.jpg?grayscale&responsive';
 
 export default class IndexController extends Controller {
-  dogImage = dogImage;
-  dogImageLqipColor = dogImageLqipColor;
-  dogImageLqipInline = dogImageLqipInline;
-  dogImageLqipBlurhash = dogImageLqipBlurhash;
+  image = image;
+  imageLqipColor = imageLqipColor;
+  imageLqipInline = imageLqipInline;
+  imageLqipBlurhash = imageLqipBlurhash;
+  imagePortrait = imagePortrait;
+  imageGray = imageGray;
 }

apps/ember-vite/app/templates/index.hbs

@@ -16,24 +16,34 @@
 
 <h2>Local</h2>
 
-<ResponsiveImage @src={{this.dogImage}} data-test-local-image="responsive" />
+<ResponsiveImage @src={{this.image}} data-test-local-image="responsive" />
 <ResponsiveImage
-  @src={{this.dogImage}}
+  @src={{this.image}}
   @width={{320}}
   data-test-local-image="fixed"
 />
 <ResponsiveImage
-  @src={{this.dogImageLqipColor}}
+  @src={{this.imageLqipColor}}
   @width={{320}}
   data-test-local-image="fixed,lqip-color"
 />
 <ResponsiveImage
-  @src={{this.dogImageLqipInline}}
+  @src={{this.imageLqipInline}}
   @width={{320}}
   data-test-local-image="fixed,lqip-inline"
 />
 <ResponsiveImage
-  @src={{this.dogImageLqipBlurhash}}
+  @src={{this.imageLqipBlurhash}}
   @width={{320}}
   data-test-local-image="fixed,lqip-blurhash"
+/>
+<ResponsiveImage
+  @src={{this.imageGray}}
+  @width={{320}}
+  data-test-local-image="fixed,grayscale"
+/>
+<ResponsiveImage
+  @src={{this.imagePortrait}}
+  @width={{320}}
+  data-test-local-image="fixed,aspect"
 />