non-square images are squished

[TrevinAvery]

Current behaviour 💣

If your source image is not square, it will be squished to become square.

Expected behaviour ☀️

For non-square images, it would be better to simply add transparent spacing so the content of the image does not change. Maybe even clip to the actual content of the image first, in case there are transparent borders.

Reproduction Example 👾

Just use an image that is not square.

Environment 🖥

Node.js v16.4.2
darwin 18.7.0

├─┬ @vue/cli-plugin-babel@5.0.0-beta.2
│ ├─┬ babel-loader@8.2.2
│ │ └── webpack@5.44.0 deduped
│ ├─┬ thread-loader@3.0.4
│ │ └── webpack@5.44.0 deduped
│ └── webpack@5.44.0
├─┬ @vue/cli-plugin-eslint@5.0.0-beta.2
│ ├─┬ eslint-webpack-plugin@2.4.3
│ │ └── webpack@5.44.0 deduped
│ └── webpack@5.44.0 deduped
├─┬ @vue/cli-service@5.0.0-beta.2
│ ├─┬ @soda/friendly-errors-webpack-plugin@1.8.0
│ │ └── webpack@5.44.0 deduped
│ ├─┬ @vue/vue-loader-v15@npm:vue-loader@15.9.7
│ │ └── webpack@5.44.0 deduped
│ ├─┬ cache-loader@4.1.0
│ │ └── webpack@5.44.0 deduped invalid
│ ├─┬ copy-webpack-plugin@8.1.1
│ │ └── webpack@5.44.0 deduped
│ ├─┬ css-loader@5.2.6
│ │ └── webpack@5.44.0 deduped
│ ├─┬ css-minimizer-webpack-plugin@2.0.0
│ │ └── webpack@5.44.0 deduped
│ ├─┬ file-loader@6.2.0
│ │ └── webpack@5.44.0 deduped
│ ├─┬ html-webpack-plugin@5.3.2
│ │ └── webpack@5.44.0 deduped
│ ├─┬ mini-css-extract-plugin@1.6.2
│ │ └── webpack@5.44.0 deduped
│ ├─┬ postcss-loader@5.3.0
│ │ └── webpack@5.44.0 deduped
│ ├─┬ terser-webpack-plugin@5.1.4
│ │ └── webpack@5.44.0 deduped
│ ├─┬ url-loader@4.1.1
│ │ └── webpack@5.44.0 deduped
│ ├─┬ webpack-dev-server@3.11.2
│ │ ├─┬ webpack-dev-middleware@3.7.3
│ │ │ └── webpack@5.44.0 deduped
│ │ └── webpack@5.44.0 deduped
│ └── webpack@5.44.0 deduped
├─┬ favicons-webpack-plugin@5.0.2
│ ├── favicons@6.2.2 deduped
│ ├── html-webpack-plugin@5.3.2 deduped
│ └── webpack@5.44.0 deduped
├── favicons@6.2.2
├─┬ responsive-loader@2.3.0
│ └── webpack@5.44.0 deduped
├─┬ sass-loader@10.2.0
│ └── webpack@5.44.0 deduped
├─┬ vue-cli-plugin-vuetify@2.4.1
│ └─┬ null-loader@3.0.0
│   └─┬ webpack@4.46.0
│     └─┬ terser-webpack-plugin@1.4.5
│       └── webpack@4.46.0 deduped
└─┬ vuetify-loader@1.7.2
  └── webpack@5.44.0 deduped

[stale]

This issue had no activity for at least half a year. It's subject to automatic issue closing if there is no activity in the next 15 days.