# How to Adjust Bootstrap Image Size to Fit a Div Container
> Learn how to adjust bootstrap image size to fit a div container using the img-fluid class. Make your images responsive and scale perfectly within any parent element.
- Repository: [Bootstrap/bootstrap](https://github.com/twbs/bootstrap)
- Tags: how-to-guide
- Published: 2026-02-16
---
**Use the `.img-fluid` class on your `` element to make it responsive, applying `max-width: 100%` and `height: auto` so it scales within its parent div while maintaining its original aspect ratio.**
Controlling **bootstrap image size** within layout containers is a fundamental requirement for responsive web design. The Bootstrap framework provides utility classes that handle responsive scaling through specific CSS rules defined in the source code. This guide explains how to use these utilities to make images fit their parent divs perfectly, referencing the actual implementation in the `twbs/bootstrap` repository.
## Understanding the Bootstrap Image Size Utilities
Bootstrap’s responsive image system relies on a Sass mixin that applies two critical CSS properties to prevent overflow and distortion.
### The img-fluid Mixin Implementation
The core functionality resides in [`scss/mixins/_image.scss`](https://github.com/twbs/bootstrap/blob/main/scss/mixins/_image.scss), which defines the `img-fluid` mixin:
```scss
// scss/mixins/_image.scss
@mixin img-fluid() {
max-width: 100%;
height: auto;
}
```
This mixin is then attached to the `.img-fluid` class in [`scss/_images.scss`](https://github.com/twbs/bootstrap/blob/main/scss/_images.scss):
```scss
// scss/_images.scss
.img-fluid {
@include img-fluid();
}
```
### How img-fluid Works
The `max-width: 100%` declaration prevents the **bootstrap image size** from exceeding the width of its parent container, while `height: auto` ensures the image scales proportionally. This combination eliminates horizontal scrolling and maintains visual integrity across device sizes.
## Making Images Fit a Div Container
Apply these patterns to control how images behave within specific layout constraints.
### Basic Responsive Images
For images that should scale down on smaller screens but never exceed their natural size or container width:
```html
```
### Forcing Full Width with w-100
If you need the image to **always fill 100% of the container’s width**—even when the source image is smaller than the div—combine `.img-fluid` with the width utility class `.w-100`:
```html
This image fills the card width regardless of source dimensions.
```
The `.w-100` class applies `width: 100%`, overriding the natural image width while `.img-fluid` maintains the aspect ratio.
### Using img-thumbnail for Gallery Layouts
For thumbnail galleries that require borders and padding alongside responsive scaling, use `.img-thumbnail`. This class applies the same responsive rules as `.img-fluid` but adds a rounded border and padding:
```html
```
## Source Code Reference
The responsive image system is implemented across these key files in the `twbs/bootstrap` repository:
- **[`scss/mixins/_image.scss`](https://github.com/twbs/bootstrap/blob/main/scss/mixins/_image.scss)** — Defines the `img-fluid` mixin with `max-width: 100%` and `height: auto`
- **[`scss/_images.scss`](https://github.com/twbs/bootstrap/blob/main/scss/_images.scss)** — Declares the `.img-fluid` and `.img-thumbnail` classes
- **[`scss/helpers/_ratio.scss`](https://github.com/twbs/bootstrap/blob/main/scss/helpers/_ratio.scss)** — Provides additional utilities for maintaining aspect ratios in responsive embeds
- **[`docs/content/utilities/images.md`](https://github.com/twbs/bootstrap/blob/main/docs/content/utilities/images.md)** — Official documentation for image utilities
## Summary
- Use **`.img-fluid`** to make images responsive within div containers, preventing overflow while preserving aspect ratio
- Combine **`.img-fluid`** with **`.w-100`** when you need the image to stretch to fill 100% of the container width
- Apply **`.img-thumbnail`** for gallery images that need responsive scaling plus decorative borders and padding
- The underlying CSS (`max-width: 100%; height: auto`) is defined in [`scss/mixins/_image.scss`](https://github.com/twbs/bootstrap/blob/main/scss/mixins/_image.scss) and applied via [`scss/_images.scss`](https://github.com/twbs/bootstrap/blob/main/scss/_images.scss)
## Frequently Asked Questions
### What is the difference between img-fluid and w-100 in Bootstrap?
**`.img-fluid`** applies `max-width: 100%` and `height: auto`, allowing the image to scale down if the container is smaller than the image, but preventing it from stretching larger than its natural size. **`.w-100`** applies `width: 100%`, forcing the image to fill the entire width of its parent regardless of the source dimensions, which is useful when you want consistent sizing but may cause pixelation with small source images.
### How do I make an image fit a specific div height without distortion?
Bootstrap does not provide a built-in class for filling specific heights while maintaining aspect ratio. For this requirement, you typically use the **`object-fit`** CSS property (e.g., `object-fit: cover`) combined with explicit height settings on the parent div. Alternatively, the Bootstrap ratio helpers in [`scss/helpers/_ratio.scss`](https://github.com/twbs/bootstrap/blob/main/scss/helpers/_ratio.scss) can maintain aspect ratios for embedded content using the padding-bottom technique.
### Why is my image overflowing its container even with img-fluid?
If an image overflows despite using **`.img-fluid`**, check for conflicting CSS rules that might be setting a fixed `width` or `min-width` on the image or its parent container. Also verify that the parent div does not have `white-space: nowrap` or display properties that prevent proper width calculation. Ensure you are using the class exactly as `.img-fluid` (not `img-fluid` without the dot in HTML class attributes).
