html - CSS - 图像不会放大到原始大小

Question

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

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

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

在我看来，max-width 上设置的 100% 是父级的 100%，对吧？？不是图片本身？

fiddle 链接: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

max-width 只会让图像增长到与图像像素尺寸一样大。您的图片自然宽度为 640 像素。

如果你这样做...

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

然后图像增长到窗口的 100%。

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