CSS

Question

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

空白 HTML 页面中的一张图片和最大宽度设置为 100% 的 CSS class 有助于在缩放浏览器时缩放此图片 window.

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

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

.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 只会让图像增长到与图像像素尺寸一样大。您的图片自然宽度为 640px。

如果你这样做...

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

然后图像增长 100% window。

Answer 3

您不需要给img标签指定特定的class，只需在CSS下面使用一般图片即可。

img 
{
  max-width: 100%;
}

使用上面的代码后图片永远不会超过window尺寸，

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