Trouble downsizing local image to fit div

Question

I've got a page and want to show an image in it. I want it to be inside a div that has a fixed size.

The button browses a local disk for an image. If the image is smaller than the containing div, no problem, it stretches to fit the div. However, when it's larger than the div, it simply isn't displayed.

Here's the code:

HTML

<div class="padded">

    <div class="container">

        <img width="100%" src="@ViewBag.imgPath"/>

    </div>

</div>

CSS

.padded
{
    padding: 20px 0px 0px 20px;
}

.container
{
    width: 250px;
    height: 300px;
}

img
{
    max-width: 100%;
    max-height: 100%;
}

I tried, as can be seen in the above code, the max-width and max-height properties, setting a fixed size for the containing div but it doesn't work.

Here's a small list of questions I've checked without finding the solution:

• one
• two
• three
• four

And here's the fiddle.

EDIT

Note that it works with an image from the internet but not with one from my local machine. Example: if the src property is like src="http://whatever/image.png", it works fine. If it is something like src="c:\whatever\image.png", it doesn't work. In my case, the images will be on my machine so I need a solution for that.

Answer 1

Try just removing the width="100%" from the img tag. Also add display: block to your img.

Answer 2

You can try putting the image in the same folder as the file and instead of the whole path to image file, use only the file name and see if it works. If it does then there is something wrong with the path that you are putting in.