Skip to content

Image without using background-image #2155

@mnoop

Description

@mnoop

Is your feature request related to a problem? Please describe.

I'm trying to have an image that keeps its aspect ratio while resizing to fit inside a container with a maxHeight style. Using resizeMode of contain works, but the element takes up all of the space even though the image is centered, since it's being centered as a background. This means the white space around the image that fills the container is still considered part of the image (you can right click the white space and save the image).

Describe a solution you'd like

An implementation of the contain resizeMode that keeps the element (and the hidden accessibilityImage) sized to the visible image, instead of taking up the entire space.

Describe alternatives you've considered

  • I got it to work with the aspectRatio style, but unfortunately aspect-ratio has only recently gained browser support, so I can't use it yet.
  • Since browsers use the img width/height attributes to calculate an aspect ratio, perhaps setting those attributes could be part of the solution?
  • I'm currently trying to just use the padding trick to preserve the aspect ratio, but I'm not having any luck.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions