Aspect Not Working Correctly With Images + Manual Fix #5288 - GitHub

Trang chủ » W-100 Bootstrap Vue » Aspect Not Working Correctly With Images + Manual Fix #5288 - GitHub

Có thể bạn quan tâm

Skip to content Dismiss alert {{ message }} / bootstrap-vue Public

  • Uh oh!

    There was an error while loading. Please reload this page.

  • Notifications You must be signed in to change notification settings
  • Fork 1.9k
  • Star 14.5k
  • Code
  • Issues 178
  • Pull requests 18
  • Discussions
  • Actions
  • Projects
  • Security

    Uh oh!

    There was an error while loading. Please reload this page.

  • Insights
Additional navigation options Aspect not working correctly with images + manual fix #5288New issueNew issueClosedClosedAspect not working correctly with images + manual fix#5288LabelsStatus: AnsweredType: Question@matanshukry

Description

@matanshukrymatanshukryopened on May 1, 2020

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

👍React with 👍1

Metadata

Metadata

Assignees

No one assigned

Labels

Status: AnsweredType: Question

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions

You can’t perform that action at this time.

Từ khóa » W-100 Bootstrap Vue