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.

Answer 1

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.