Web development
Responsive Images and Text
Updated Oct 28, 2026
Prevent images from overflowing their container and preserve their proportions. Use readable text sizes, sufficient contrast and layouts that work when text is zoomed. Avoid fixed heights that cut off
What you’ll learn
Understand and practise responsive images and text.
Explanation
Prevent images from overflowing their container and preserve their proportions. Use readable text sizes, sufficient contrast and layouts that work when text is zoomed. Avoid fixed heights that cut off longer or translated text.
ការពាររូបភាពមិនឱ្យលើស container និងរក្សាសមាមាត្រ។ ប្រើអក្សរងាយអាន និងសាកល្បងពេលពង្រីកអក្សរ ឬពេលអត្ថបទបកប្រែវែងជាងមុន។
Example
Use img { max-width: 100%; height: auto; } for a flexible image.
Practice
Why avoid a fixed height on a text card?
Answer and explanation
Show answer / បង្ហាញចម្លើយ
Longer or enlarged text may be clipped or overflow.
Quick recap
Prevent images from overflowing their container and preserve their proportions.
