CSS-图片无法放大到原始大小

Question

一个非常简单的问题，但我自己找不到解决方案...

只是空白HTML页面中的图像和最大宽度设置为100％的CSS类，以帮助缩放浏览器窗口时缩放该图像。

问题是，当窗口的宽度超过图像的宽度时，图像将不再增长...

在我看来，最大宽度上设置的100％是父项权利的100％？不是图像本身吗？

链接到小提琴：https://jsfiddle.net/gr7u1ytq/2/

.image {
  background: grey;
  max-width: 100%;
}

<center>
  <img class="image" src="https://preview.ibb.co/iNVyTd/Graph_Monthly_Expenses_1270.png" />
</center>

Answer 1

还将图像宽度设置为100％

.image {
  background: grey;
  max-width: 100%;
  width: 100%;
}

Answer 2

max-width将仅使图像增长到与图像像素尺寸一样大。您的图片自然是640像素宽。

如果您这样做...

.image {
  background: grey;
  width: 100%;
}

然后图像会放大100％的窗口。

https://jsfiddle.net/joshmoto/gr7u1ytq/3/

Answer 3

您不需要为img标签指定特定的类，只需在CSS下面使用常规图像即可。

img 
{
  max-width: 100%;
}

使用上述代码图像后，将永远不会超过窗口大小，