Web development
Preventing Image Overflow
Updated Oct 28, 2026
An image with a fixed width can exceed a narrow container. Set max-width: 100% and height: auto to allow an image to scale down while preserving its proportions. Give informative images appropriate al
What you’ll learn
Learn to apply preventing image overflow in a practical situation.
Explanation
An image with a fixed width can exceed a narrow container. Set max-width: 100% and height: auto to allow an image to scale down while preserving its proportions. Give informative images appropriate alternative text and test with long translated text nearby.
រូបភាពទំហំថេរអាចលើស container តូច។ ប្រើ max-width: 100% និង height: auto ដើម្បីបង្រួមរូបភាពដោយរក្សាសមាមាត្រ។ បន្ថែម alt សម្រាប់រូបភាពផ្ដល់ព័ត៌មាន។
Worked example
CSS: img { max-width: 100%; height: auto; }
Practice
- Why use height: auto with a scaled image?
- Apply the idea to an example of your own and explain your choice.
Answers and guidance
Show answers / បង្ហាញចម្លើយ
- It helps preserve the image’s proportions.
- Answers vary. Compare your example with the explanation and check each step.
Quick recap
An image with a fixed width can exceed a narrow container.