Question
How can I automatically resize a large image so it fits inside a narrower div container while preserving its original width-to-height ratio?
For example, sites such as Stack Overflow automatically scale down large images inserted into the editor or post preview so they do not overflow the page. How can I achieve the same behavior in CSS?
Short Answer
By the end of this page, you will understand how to make images shrink to fit their containers without distortion, which CSS properties are most commonly used for this, and how this pattern is applied in real websites and applications.
Concept
When an image is larger than its container, it can overflow and break the layout. A common solution is to let the browser scale the image down automatically.
The key idea is:
- limit the image's width relative to its container
- let the browser calculate the height automatically
- preserve the original aspect ratio so the image does not look stretched
In CSS, this is usually done with:
img {
max-width: 100%;
height: auto;
}
Why this works:
max-width: 100%means the image can never be wider than its parent containerheight: autotells the browser to adjust the height proportionally- if the image is already smaller than the container, it keeps its natural size
This matters because responsive layouts are everywhere:
- blog posts with uploaded images
- product pages
- dashboards
- CMS editors
- mobile-friendly websites
Without this rule, oversized images can cause horizontal scrolling, clipped content, or broken designs.
Mental Model
Think of an image like a printed photo being placed into a picture frame.
- The
divis the frame - The image is the photo
max-width: 100%says: "the photo must not be wider than the frame"height: autosays: "shrink the photo evenly so it keeps its shape"
If you squeeze width without adjusting height correctly, the photo gets stretched. If you let the browser scale both proportionally, the photo stays natural.
Syntax and Examples
Core CSS
img {
max-width: 100%;
height: auto;
}
Basic Example
<div class="container">
<img src="large-photo.jpg" alt="Example image">
</div>
.container {
width: 300px;
border: 1px solid #ccc;
}
.container img {
max-width: 100%;
height: auto;
}
What happens here
- The container is
300pxwide - If the image is wider than
300px, it scales down - The height changes automatically to keep the same aspect ratio
- If the image is smaller than
300px, it stays at its original size
Step by Step Execution
Consider this example:
<div class="box">
<img src="banner.jpg" alt="Banner">
</div>
.box {
width: 400px;
}
.box img {
max-width: 100%;
height: auto;
}
Assume the original image size is:
- width:
1200px - height:
600px
Step-by-step
- The browser sees that
.boxis400pxwide. - The image wants to render at its natural width of
1200px. max-width: 100%stops it from exceeding the parent's width.- So the displayed image width becomes
400px.
Real World Use Cases
This pattern is used in many common situations:
- Blog editors: uploaded screenshots should not overflow the article width
- Forums and Q&A sites: large images need to fit post content areas
- E-commerce: product images must fit cards or product detail sections
- CMS dashboards: user-uploaded media should adapt to different layouts
- Mobile websites: images must scale down on smaller screens
- Email previews or message apps: attached images should stay within message width
Example: a comment section may allow users to paste images of any size. Applying responsive image rules ensures the UI remains readable and consistent.
Real Codebase Usage
In real projects, developers usually do more than style every img globally. They often scope the rule to content areas where user-generated images appear.
Common pattern
.article-content img,
.comment-body img,
.editor-preview img {
max-width: 100%;
height: auto;
}
This avoids affecting icons, logos, or other images that need special sizing.
Patterns used with this concept
- Scoped styling: apply rules only inside content containers
- Responsive layouts: combine with flexible container widths
- Guarding against layout breaks: ensure user-uploaded images never overflow
- Display normalization: use
display: blockto avoid inline spacing quirks - Cropping when needed: use
object-fitif a fixed image box is required
Example with a card layout
.card img {
width: 100%;
height: auto;
}
Developers use this when every card image should visually match the card width.
Common Mistakes
1. Setting both width and height to fixed values
Broken example:
img {
width: 300px;
height: 300px;
}
Why it is a problem:
- the image may become stretched or squashed
- aspect ratio is not preserved unless the original image is exactly square
Better:
img {
width: 300px;
height: auto;
}
2. Using width: 100% when you only wanted to shrink large images
img {
width: 100%;
height: auto;
}
This enlarges small images too.
If you only want to reduce oversized images, use:
img {
max-width: 100%;
height: auto;
}
3. Forgetting the container width matters
If the parent element has no meaningful width constraint, the image may not appear to resize as expected.
Comparisons
| Approach | What it does | Keeps aspect ratio? | Enlarges small images? | Best use case |
|---|---|---|---|---|
max-width: 100%; height: auto; | Shrinks image only when needed | Yes | No | User-uploaded or content images |
width: 100%; height: auto; | Forces image to match container width | Yes | Yes | Full-width card or layout images |
Fixed width and height | Forces exact size | Usually no | Depends | Only when exact dimensions are required |
object-fit: contain | Fits image inside fixed box |
Cheat Sheet
/* Most common responsive image rule */
img {
max-width: 100%;
height: auto;
}
Quick rules
max-width: 100%prevents overflowheight: autopreserves aspect ratiowidth: 100%makes the image always fill the container widthdisplay: blockcan remove inline image spacing issues- use
object-fitonly when fitting into a fixed-size box
Common patterns
.content img {
max-width: 100%;
height: auto;
}
.card img {
width: 100%;
height: auto;
}
.thumb {
width: 200px;
height: ;
}
{
: ;
: ;
: cover;
}
FAQ
How do I make an image fit inside a div without stretching?
Use:
img {
max-width: 100%;
height: auto;
}
This keeps the image proportional.
What is the difference between max-width: 100% and width: 100%?
max-width: 100% only shrinks large images. width: 100% forces all images to fill the container, including small ones.
Why is height: auto important?
It tells the browser to calculate the height based on the width, preserving the original aspect ratio.
Why is my image still overflowing?
Check the parent container. If the container itself is too wide or has no width constraint, the image may still appear large.
Should I apply this to all images globally?
Usually not. It is often better to target content areas like articles, comments, or editor previews.
When should I use object-fit instead?
Use object-fit when the image must fit into a fixed-size box, such as thumbnails, profile cards, or gallery tiles.
Does this work for responsive websites?
Mini Project
Description
Build a simple article layout where users can place large images into a content area without breaking the page width. This demonstrates how responsive image resizing works in a realistic content display scenario.
Goal
Create a content box where oversized images automatically shrink to fit while keeping their original proportions.
Requirements
- Create a
divcontainer with a fixed maximum width - Add at least one large image inside the container
- Prevent the image from overflowing the container
- Preserve the image's aspect ratio while resizing
- Make the result work cleanly on smaller screens
Keep learning
Related questions
CSS Font Scaling Relative to Container Size: %, em, rem, vw, and Responsive Text
Learn how CSS font scaling really works and how to make text responsive using %, em, rem, vw, clamp(), and media queries.
CSS Parent Selector Explained: Selecting a Parent <li> from an <a>
Learn whether CSS has a parent selector, how :has() works, and practical alternatives for styling a parent li from a child anchor.
CSS Previous Sibling Selector: What Exists and How to Work Around It
Learn whether CSS has a previous sibling selector, why it does not, and practical ways to style earlier elements using CSS alternatives.