Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🐞[bug]: Profile Picture Stretching in Customer Opinion Cards on /html-files/services #452

Open
4 tasks done
sagarbendale2004 opened this issue Oct 12, 2024 · 5 comments
Open
4 tasks done

🐞[bug]: Profile Picture Stretching in Customer Opinion Cards on /html-files/services #452

sagarbendale2004 opened this issue Oct 12, 2024 · 5 comments
Assignees
@sagarbendale2004
Labels
bug Something isn't working gssoc-ext hacktoberfest-accepted

Comments

@sagarbendale2004
Copy link
Contributor

Is there an existing issue for this?

  • I have searched the existing issues

Describe the bug

On the /html-files/services route, the profile pictures in the customer opinion cards are inconsistently displayed. Some images are stretched vertically, while others are stretched horizontally, making the layout appear unbalanced and the images look distorted.

Steps to Reproduce:

  • Visit the Services page.
  • Scroll to the customer opinion section.
  • Observe the profile pictures in the opinion cards. Notice how some are stretched vertically and others horizontally.

Actual Behavior:

  • The profile pictures are inconsistently stretched (either vertically or horizontally), which distorts the images.
  • This creates an unprofessional and uneven appearance across the opinion cards.

Expected behavior

  • Profile pictures should maintain their aspect ratio, ensuring that none are stretched or distorted.
  • All images should be displayed consistently across the opinion cards, resulting in a balanced and professional layout.

Add ScreenShots

Screenshot 2024-10-12 104127

What browsers are you seeing the problem on?

No response

Record

  • I have read the Contributing Guidelines
  • I'm a GSSOC'24EXTD contributor
  • I have starred the repository
@github-actions GitHub Actions
Copy link

Hi there! Thanks for opening this issue @sagarbendale2004!. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible.

@sagarbendale2004
Copy link
Contributor Author

@Anjaliavv51 "Hi, I noticed the issue with the stretched profile pictures in the customer opinion cards. I’d like to work on fixing the image aspect ratio to ensure consistency. Could you please assign this to me?"

@Anjaliavv51
Copy link
Owner

@sagarbendale2004 go ahead.

@sagarbendale2004 sagarbendale2004 mentioned this issue Oct 13, 2024
Merged
6 tasks
Anjaliavv51 added a commit that referenced this issue Oct 13, 2024
@Anjaliavv51
Fix inconsistent image stretching on customer opinion cards #452 (#492)
088918a 
<!-- ISSUE & PR TITLE SHOULD BE SAME-->
## Description

#452 fixes

This PR addresses the issue of distorted profile pictures on the
/html-files/services route. Previously, the customer opinion cards
displayed profile pictures with inconsistent aspect ratios, causing some
images to stretch vertically or horizontally, which made the layout
appear unbalanced and the images look distorted.

## Fix Details:

- Added CSS properties to ensure profile pictures maintain their aspect
ratio, preventing distortion.
- Applied consistent styling to all images, ensuring they fit within the
designated space while preserving their original dimensions.

## Changes Made:
Updated CSS for the profile pictures:

- Used object-fit: cover; to ensure images maintain their aspect ratio
and fill the container without distortion.
- Set a fixed width and height for the images to ensure consistent
layout across cards.

## Screenshots
## Before -
![Screenshot 2024-10-13
164233](https://github.com/user-attachments/assets/c0f8f82f-01b3-4ba6-9c01-3e9cd37bb8e7)

## After -
![Screenshot 2024-10-13
164318](https://github.com/user-attachments/assets/3d0e096d-bebb-41c5-b16a-2871b3ab312b)

## Checklist
<!-- [X] - put a cross/X inside [] to check the box -->
- [x] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [x] I have updated my branch and synced it with project `main` branch
before making this PR
- [x] I have performed a self-review of my code
- [x] I have tested the changes thoroughly before submitting this pull
request.
- [x] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [x] I have commented my code, particularly in hard-to-understand
areas.
@Kiran-F
Copy link

Kiran-F commented Oct 13, 2024

@sagarbendale2004 I also raised the same issue and created a PR but I don't know it was not accepted. (issue# 460)
The only thing I did was setting the object-fit to cover which made it balanced but still. Anyways never mind.
But the way you presented the issue is great.

@sagarbendale2004
Copy link
Contributor Author

sagarbendale2004 commented Oct 14, 2024 •
edited
Loading

@Kiran-F My issue was #452 after that you raised the same issue due to this reason your PR not get accepted.

Suggestion - before raising issue first check that particular issue was raised before or it get assigned to anyone if not then only proceed further.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@sagarbendale2004 sagarbendale2004

Labels
bug Something isn't working gssoc-ext hacktoberfest-accepted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@sagarbendale2004 @Kiran-F @Anjaliavv51