Improve Responsive Image Handling in Docs (Remove Inline Widths, Avoid Media Queries, No !important)

[zihanKuang]

The current CSS solution relies on media queries and !important declarations, which can be fragile and harder to maintain. The goal of this issue is to refactor and optimize the current solution for better long-term maintainability and scalability.
Screenshots that are too low in quality should ideally be excluded from the docs or not used in figure components, to preserve visual clarity and professionalism.

Optimization Goals:

1. Eliminate media queries

   • Replace fixed breakpoint rules with more adaptive techniques such as max-width, min-width, and calc() to allow fluid layouts across any screen size.

2. Avoid !important usage

   • Refactor selectors and specificity to override inline styles cleanly without relying on !important.

3. Improve scaling for various image types

   • Allow small but high-quality images to retain their native resolution.
   • Prevent large or low-resolution images from being upscaled and pixelated.

[zihanKuang]

This issue is closed as it was resolved by Closed #551.