How to create a responsive image that also scales up in Bootstrap 3

Advanced customizations for optimal image scaling

While .img-responsive is a one-size-fits-most solution, sometimes it needs some additional tweaking:

Perfect scaling on all devices? Yes, please!

For the image to scale up on larger screens, add a min-height to your media queries:

@media (min-width: 1200px) {
    .img-responsive {
        min-height: 300px; /* Not a magic number - Adjust as needed */
    }
}


Maintain aspect ratio like a pro

A specific height alongside .img-responsive can save the day when aspect ratio preservation is non-negotiable:

.img-responsive {
    height: 200px; /* Because numbers are cool. Adjust as necessary. */
}


Container strategy for better scaling — No assembly required

Enclosing your image in a div with display: table is a secret trick to improve the scaling mechanism:

<div style="display: table; width: 100%;">
    <img src="image.jpg" class="img-responsive" style="display: table-cell; max-width: none;" alt="...">
</div>


Here, max-width: none; gives the image a license to thrill by ignoring its natural boundaries and freely filling the container.

The Bootstrap visual aid – Because seeing is believing

Think of your responsive image as a chameleon 🦎, adjusting its size based on the surroundings (the container size):

img-responsive = Chameleon's color-changing skin (🌈):

🦎 < 🏞️: The chameleon adjusts according to the particular landscape it is in.

When it needs to grow larger than its original dimensions, the width goes the full 100%:

img {
    width: 100%;
    height: auto;
}


🦎🌈➕: This makes the chameleon expand even more, adapting itself seamlessly to landscapes of all sizes.

Custom CSS breakpoints for different devices — A shoulder to lean on

Getting your image to adapt beautifully to different devices might require your CSS skills and media queries to go a notch higher:

Tablets — Keep the quality intact, and ratio sorted

Ensure the image maintains its integrity when viewed on tablets:

@media (min-width: 768px) and (max-width: 991px) {
    .img-responsive {
        max-width: 100%;
        height: auto;
    }
}


Mobile phones — Size matters

For tiny mobile screens, make sure your image proudly fills the width:

@media (max-width: 767px) {
    .img-responsive {
        width: 100%;
        height: auto;
    }
}


Large screens — Maintain presence

On large desktop monitors, even smaller images need their spotlight:

@media (min-width: 992px) {
    .img-responsive {
        min-height: 400px; /* Yet another magic number! Adjust as required. */
    }
}


Bootstrap's grid system and breakpoints — The safety net

The prowess of Bootstrap's grid system comes to your rescue when you want to ensure responsiveness against other elements, ensuring your image doesn't look out of place.

"product-img" container — added flexibility

Using a custom product-img div as your container gives you added control over the style and behavior of your image element within the grid structure:

<div class="col-md-4 col-sm-4 col-xs-12 product-img">
    <img src="image.jpg" class="img-responsive" alt="...">
</div>


This setup ensures that your image behaves as expected on devices of all types and sizes.