Bootstrap different img size at lg, md sm and xs

问题

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.

回答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.

回答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.

回答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.

回答4:

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>

回答5:

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.

回答6:

I'm also a newbie but rather than all complex codes above, this simple code fixed my problem.

#logo img {
    max-height: 100%; 
    max-height: 50vh; //50% of user's viewport height
}

If you want to make changes for width, then try this:

#logo img {
        max-width: 100%; 
        max-width: 50vw; //50% of user's viewport width
    }

I hope this also help for others.

回答7:

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 and Bootstrap 4

来源：https://stackoverflow.com/questions/24087944/bootstrap-different-img-size-at-lg-md-sm-and-xs

标签

html

css

responsive-design

twitter-bootstrap-3