无法缩小本地图像的尺寸以适应div

Question

我有一个页面，想要在其中显示图像。我希望它在一个固定大小的div中。

按钮浏览图像的本地磁盘。如果图像小于包含div，没有问题，它会拉伸以适合div。但是，当它大于div时，它就不会显示。

以下是代码：

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%;
}

我在上面的代码中尝试了max-width和max-height属性，为包含div设置了固定大小，但它不起作用。

这是我在没有找到解决方案的情况下检查的一小部分问题：

• one
• two
• three
• four

这是fiddle。

修改

请注意，它适用于来自互联网的图像，但不适用于本地计算机中的图像。示例：如果src属性与src="http://whatever/image.png"类似，则可以正常工作。如果它类似src="c:\whatever\image.png"，则不起作用。在我的情况下，图像将在我的机器上，所以我需要一个解决方案。

Answer 1

尝试从width="100%"标记中删除img。同时将display: block添加到您的img。

Answer 2

您可以尝试将图像放在与文件相同的文件夹中，而不是图像文件的整个路径，只使用文件名并查看它是否有效。如果确实如此，那么您输入的路径就会出现问题。