Fix: Added max-width to learning path images

[Jivi-this-side]

Description

This PR fixes #6411

The issue was that images in the learning paths were taking up the full width of their container, causing them to appear excessively large and unscalable. This PR adds the max-width: 100%; and object-fit: contain; CSS properties to ensure that images are properly constrained and maintain their aspect ratios while scaling proportionally.

Notes for Reviewers

• Tested the changes locally to ensure that the images now scale appropriately and are responsive across different screen sizes.
• The fix is applied to the .card-image img styles in the learn-card.style.js file.

• layer5/src/components/Learn-Components/Card-Component/learn-card.style.js

  Lines 85 to 88 in 711ee7a

  	img{
  	height: 8.5rem;
  	width: 8.5rem;
  	}

Signed commits

• Yes, I signed my commits.

Thankyou ! 🌻

[l5io]

🚀 Preview for commit 89464ce at: https://6810d3e50ee12c7354263f8d--layer5.netlify.app

[vr-varad]

@Jivi-this-side the issue was to add max-width but not 100%, the image are still humongous and issue was to have a maxwidth to keep them smaller even if the screen size increases.
The approach is right just make max-width smaller.

[Jivi-this-side]

@vr-varad Sir, if I set max-width: 600px, would the following CSS:

img{ 
            height: 8.5rem; 
            width: 8.5rem; 
        }  

If i set the max-width: 600px property will not apply because the width is explicitly defined as 8.5rem. This CSS won't behave as intended since the explicitly defined height and width (both set to 8.5rem) override the max-width: 600px, rendering it ineffective. Could you provide further guidance on this?

[vr-varad]

You're getting the issue because width: 8.5rem; is forcing the image to always be 8.5rem wide. So even though you wrote max-width: 100%, it doesn’t work — the image won't shrink to fit its container, since the fixed width wins.
@Jivi-this-side

[Jivi-this-side]

@vr-varad sir ! Apologies for the interruption, but I believe that adding the following inline style:
style="max-width: 500px; height: auto; width: 100%;"
at this location in the file :

layer5/content-learn/mastering-meshery/introduction-to-meshery/meshery/reviewing-designs.mdx

Line 58 in 711ee7a

<img src={commentingViaDock} width="100%" align="center" />

would effectively constrain the images, causing them to shrink as desired. This approach ensures that the images remain responsive, scaling appropriately within the container while maintaining their aspect ratio.
Should I revert my previous max-width changes and commit this updated change instead? Locally, this styling is producing the intended appearance :

Am I correct in this approach?

[vr-varad]

This looks promising, make a commit @Jivi-this-side will review it and suggest changes if required

[Jivi-this-side]

@vr-varad Sir, I have resubmitted the changes as per our discussion above. Kindly review them and let me know if they are satisfactory or if any further modifications are needed.
Thank you 🌻

[l5io]

🚀 Preview for commit 0ed1075 at: https://68131804a673446375d22982--layer5.netlify.app

[vr-varad]

I don't think that worked coz the size of the image if still humongous @Jivi-this-side

[l5io]

🚀 Preview for commit e5f5485 at: https://68135586d20cdb7482e828cc--layer5.netlify.app

[Jivi-this-side]

@vr-varad Sir,
I sincerely apologize for my earlier oversight. I mistakenly applied the changes to the wrong file, "Reviewing-Designs.mdx." However, I have now corrected this and updated the appropriate file, "Deploying-Meshery.mdx."

I deeply regret any confusion caused and kindly request your review of my latest commit. I am confident that the changes are now implemented correctly and will function as intended.

Additionally, I noticed that two images remain unchanged as they already have an inline style specifying a margin-bottom property. Would you recommend removing this inline style, or should I apply a consistent margin-bottom styling to all images for a more uniform appearance?

Thank you for your patience and understanding. I greatly appreciate your guidance! 🙇🏻‍♀️

[l5io]

🚀 Preview for commit ac203c4 at: https://6814b18c79547acc414223c9--layer5.netlify.app

[vishalvivekm]

@Jivi-this-side
Thank you for your contribution!
Let's discuss this during the website call today at 5:30 PM IST

Add it as an agenda item to the meeting minutes, if you would :)