Bootstrap different img size at lg, md sm and xs

Question

I need to make a image change it's size if the viewer has a smartphone or a PC. This achieves what I want but it's a bad way to do it because of loading the img 4 times and it's redundant:

<div class="col-md-4 text-center">
    <img class="hidden-md hidden-sm hidden-xs" src="~/Content/Images/masinaC.png" width="250" height="250" />
    <img class="hidden-lg hidden-sm hidden-xs" src="~/Content/Images/masinaC.png" width="200" height="200" />
    <img class="hidden-lg hidden-md hidden-xs" src="~/Content/Images/masinaC.png" width="150" height="150" />
    <img class="hidden-lg hidden-md hidden-sm" src="~/Content/Images/masinaC.png" width="100" height="100" />
</div>

It displays only one image at once, and only the size differs. How to achieve it without this ugly markup? Possibly with CSS, I put the image sizes in HTML just for simplicity.

Solution 1

There are multiple solutions to this, depending on the results you are looking for. Try the JSFiddle's behaviour by resizing the result's cell.

1. Using width percentage

You can set a percentage width to the image so it adapts depending on the size of the screen. This solution may increase the size of the image if the percentage is bigger than the original width, e.g., if the image is 250px wide, and you use width: 50%, and the screen width is 600px, the image will be scaled until it is 300px wide.

See JSFiddle.

1.1 Using width percentage, with fixed width parent

If you want to use the previous solution but don't want the image to scale larger than the original size, you can set a parent with max-width.

See JSFiddle.

2. Using breakpoints

Using CSS3 media queries to change the size of the image depending on the screen's width range.

See JSFiddle.

You can read more about media queries and responsive CSS here.

If you don't want to use custom media query sizes and you want to stick with the Bootstrap-specific breakpoints, your CSS should be:

/* xs */
img {
    width: 100px;
    height: auto;
}
/* sm */
@media (min-width: 768px) {
    img {
        width: 150px;
    }
}
/* md */
@media (min-width: 992px) {
    img {
        width: 200px;
    }
}
/* lg */
@media (min-width: 1200px) {
    img {
        width: 250px;
    }
}

See JSFiddle. These sizes are documented here. xs is the default because Bootstrap 3 uses a mobile-first approach.

Solution 2

img {
  width: 100%;
}

This will make the image 100 percent of its parent. This will change the image accordingly. So if the parent is col-md-4 it will take up the whole div. So you could do

<div class="col-md-4 col-sm-4 col-xs-4">

  <img src="where ever the image is" alt="what ever">

</div>

That image in this div will change relative to the col- classes if img is set to 100%. If you do not want the image to take up the whole div than just adjust accordingly 75%, 50% etc.

Solution 3

Rather than specify all the conditions where an image is hidden, better and cleaner to specify when it's visible:

<div class="col-md-4 text-center">
<img class="visible-lg" src="~/Content/Images/masinaC.png" width="250" height="250" />
<img class="visible-md" src="~/Content/Images/masinaC.png" width="200" height="200" />
<img class="visible-sm" src="~/Content/Images/masinaC.png" width="150" height="150" />
<img class="visible-xs" src="~/Content/Images/masinaC.png" width="100" height="100" />

The browser will only show the relevant image at the relevant viewport size, this way you don't have to mess around with media queries.

Solution 4

Here's an example using the <picture> element and Bootstrap 4's responsive breakpoints:

<picture>
  <source media="(min-width: 1200px)" srcset="/images/xl.png">
  <source  media="(min-width: 992px)" srcset="/images/lg.png">
  <source  media="(min-width: 768px)" srcset="/images/md.png">
  <source  media="(min-width: 576px)" srcset="/images/sm.png">
  <source  media="(max-width: 575px)" srcset="/images/xs.png">
  <img src="/images/default.png" alt="Example Text" style="width:auto;" >
</picture>

Using this, browsers will load the single correct image depending on the device's width. For older browsers, they'll simply load the default <img> element.

Solution 5

HTML5 has a new tag <picture>

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

also, boostrap 4 supports <picture>

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

View more solutions

Comments

[Mateo Velenik]

I implemented it now and it works perfect. You obviously put a lot of effort into the solution, I really appreciate it - thank you!. Cheers!

[Jurik]

But if you got different images with different sizes for each display format, it will load still every image. That is why I think media queries are quite good for mobile.

[Tyson Gibby]

With the introduction of HTML5 the <picture> element is typically best suited for this task. It allows us to serve exactly what we want to the size screen we choose: Perfect responsive images: HTML5 <picture> and Bootstrap 4 - inspire.blufra.me/html5-element-and-bootstrap-4-media-querie‌​s