imgix.js
imgix.js copied to clipboard
chore: deprecate resizing the height param when maintaining aspect ratio
This PR removes the logic in ix-src responsible for resizing the h (height) parameter to maintain aspect ratio when building the srcset attribute. With the help of the imgix aspect ratio parameter, users can now achieve the same effect with the inclusion of the ar parameter. This should yield slightly better performance, code cleanliness, and bring the library more in line with the imgix API.
Please note, the ar parameter should also be used with fit=crop to take effect.
Demo
The following is an example of how to use the ar parameter in this library. More information on usage specifics can be found on the imgix API docs.
<img
ix-src="https://assets.imgix.net/examples/treefrog.jpg?w=1000&ar=2%3A1&fit=crop"
sizes="100vw"
>
With the previous behavior, passing in both a w (width) and h (height) parameter would resize the height at each srcset pair to maintain the ratio between the two. The same effect can be achieved by passing the ar parameter once without the need to recalculate/resize the height. This will produce an image cropped to the specified ratio:
| Example srcset URL | |
|---|---|
| Before | https://assets.imgix.net/examples/treefrog.jpg?w=1000&h=500&fit=crop |
| After | https://assets.imgix.net/examples/treefrog.jpg?w=1000&ar=2%3A1&fit=crop |
The suspense on this one is killing me 😰
The progress on this one is just b l i s t e r i n g 🚀 🐢
I'm on the edge of my seat! 🏃
Contributors
Commit-Lint commands
You can trigger Commit-Lint actions by commenting on this PR:
@Commit-Lint merge patchwill merge dependabot PR on "patch" versions (X.X.Y - Y change)@Commit-Lint merge minorwill merge dependabot PR on "minor" versions (X.Y.Y - Y change)@Commit-Lint merge majorwill merge dependabot PR on "major" versions (Y.Y.Y - Y change)@Commit-Lint merge disablewill desactivate merge dependabot PR@Commit-Lint reviewwill approve dependabot PR@Commit-Lint stop reviewwill stop approve dependabot PR
:tada: This PR is included in version 4.0.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
@frederickfogerty can finally rejoice 😌
@sherwinski jumped out of my chair