search

Gauravdarkslayer / ngx-stories

An Angular component to render instagram like stories.
https://ngx-stories.vercel.app
MIT License
17 stars 13 forks source link

💡 [REQUEST] - Center landscape images #22

Closed Gauravdarkslayer closed 1 week ago

Gauravdarkslayer commented 1 month ago

Start Date

No response

Implementation PR

No response

Reference Issues

No response

Summary

When working with images in various layouts, especially on web pages, it is important to ensure that landscape-oriented images (i.e., images that are wider than they are tall) are displayed correctly. This issue focuses on centering such images horizontally and vertically within their container when their resolution is landscape.

Currently, landscape images may not be properly aligned, leading to inconsistent or visually unappealing layouts. The goal of this task is to detect if an image has a landscape resolution and, if so, automatically apply a CSS rule to center it within its container.

Expected Behavior: Images with landscape resolution (width > height) should be horizontally centered within their container. Portrait or square images should retain their current alignment (no changes needed for these).

Example Scenario: Before: A landscape image with a resolution of 1920x1080 is aligned to the top of its container, leaving empty space on the bottom side. After: The same landscape image is centered within its container, with equal space on both the left and right sides and top and bottom as well.

Basic Example

No response

Drawbacks

Additional Considerations: Ensure the centering does not interfere with responsive layouts or mobile views. Consider testing this behavior on different browsers and screen sizes to ensure consistent behavior.

Unresolved questions

No response

github-actions[bot] commented 1 month ago

Hey @Gauravdarkslayer, Thanks for contributing and Congrats on opening Issue :tada:

We will try to review as soon as possible and a maintainer will get back to you soon!

Piyush-Goenka commented 1 month ago

Hey @Gauravdarkslayer I’ll take on this issue to ensure that landscape-oriented images are properly centered within their containers. I’ll focus on applying the necessary CSS rules to achieve this while keeping the current alignment for portrait and square images intact. Additionally, I’ll make sure to test across various browsers and screen sizes to maintain responsive behavior. Looking forward to enhancing our layout consistency! Please assign this issue to me.

Gauravdarkslayer commented 1 week ago

Done in another commit.