[Bug] Inline images now broken when specifying both height in Github Markdown Preview

[BarnoTD]

🏷️ Discussion Type

Bug

Body

Setting height and width for each image, then wrapping them with a <p> tag used to display them inline (it still does on vscode preview) . Now when previewing on github inline is broken and each img is in a new line.

example:

<section>Preview</section>
<p>
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/xcode/xcode-original.svg" alt="xcode" width="45" height="45"/>
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg" alt="swift" width="45" height="45"/>
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/sqlite/sqlite-original.svg" alt="sqlite" width="45" height="45"/>
</p>

expected preview (github used to do this):

actual (new) preview in github:

workaround (if anyone had same problem):

I just set either height or weight, not both. This is still not a solution for inline images if you want forced properties (i.e: break the image aspect ratio)

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐

[RajatRTC]

Please try with

Preview

response is above

[BarnoTD]

@RajatRTC yes that works like I said below:

workaround (if anyone had same problem):

I just set either height or weight, not both.

This is practical when you don't want to override the original image aspect ration, but imagine you have a image that you want its size to match a custom height and width which are different from the image's ratio. (e.g: 200x100 to 100x100)
In this case, inline breaks like the example shown in the post

[RajatRTC]

I have updated as per requirements

[aravindvnair99]

@RajatRTC That wouldn't always work. It would only work if the server is configured to intercept those query strings and resize the image before sending it back.

[aravindvnair99]

Just came across this community post. I had created a ticket to GitHub just 20 minutes ago. ID is 4326721

While they are yet to respond, I have a workaround as seen below. If they respond, I will add as a reply to this comment.

Current broken code

<p align="left"><a href="https://developer.android.com" target="_blank"><img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/android/android-original.svg" alt="android" width="40" height="40"/></a><a href="https://www.arduino.cc/" target="_blank"><img src="https://cdn.worldvectorlogo.com/logos/arduino-1.svg" alt="arduino" width="40" height="40"/></a><a href="https://aws.amazon.com" target="_blank"><img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/amazonwebservices/amazonwebservices-original-wordmark.svg" alt="aws" width="40" height="40"/></a></p>

Current broken preview

Workaround code

<table>
  <tr>
    <td><a href="https://developer.android.com" target="_blank"><img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/android/android-original.svg" alt="android" width="40" height="40"/></a></td>
    <td><a href="https://www.arduino.cc/" target="_blank"><img src="https://cdn.worldvectorlogo.com/logos/arduino-1.svg" alt="arduino" width="40" height="40"/></a></td>
    <td><a href="https://aws.amazon.com" target="_blank"><img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/amazonwebservices/amazonwebservices-original-wordmark.svg" alt="aws" width="40" height="40"/></a></td>
  </tr>
</table>

Workaround preview

[HijelHub]

In addition to the display:block (which is what I think is breaking inline) there now seems to be background-color: var(--bgColor-muted) and border-radius: 6px added.
Setting only one (width/height) also fixes it on my end.