Aspect not working correctly with images + manual fix

Describe the bug

When using b-aspect with images that don’t match the aspect ratio, the images height will become larger and won’t match the desired aspect

Steps to reproduce the bug

1. Create an aspect ratio element with an aspect (e.g. 1.8)
2. Put an img inside the b-aspect. Make sure the image doesn’t match the aspect ratio, to see the effect it has.
3. Make sure the img has width: 100% and height: 100% to match the container size
4. See the size (which won’t match the desired aspect ratio)

Expected behavior

The div containing the image (and hence the img as well) to match the aspect ratio

Versions

Libraries:

• BootstrapVue: 2.12.0
• Bootstrap: 4.4.1
• Vue: 2.6.11

Environment:

• Device: Windows
• OS: Windows 10
• Browser: Chrome
• Version: 81

Demo link

https://codesandbox.io/s/bootstrap-vue-sandbox-8zgrw

In the demo there are 2 images blocks: (1) With the aspect. This one doesn’t work.

(2) A manual aspect box which I found how to do online; it’s the workaround I’m currently using an I’m working, although I would prefer to use b-aspect

[tmorehouse]

We might be able to add a new prop to b-aspect to force the constraint (and apply different CSS classes)

[albertpratomo]

@tmorehouse can you give a tip on how to make b-aspect force the constraint? What CSS should be applied?