css - 图像的宽度和最大宽度属性

Question

谁能告诉我 width 和 max-width 之间的关系(例如哪个在像素、百分比等方面覆盖哪个)？

如果我想，我该如何使用它们:

• 当我调整窗口大小时自动缩放图像并在图像达到其原始大小时停止缩放？

• 保持固定大小，直到我将窗口大小调整到某个小尺寸然后开始自动调整大小

Answer 1

Width 是元素的实际宽度，而 max-width 是 width 属性的最大值。最大宽度只是宽度属性的限制。

如果您想根据窗口大小调整图像大小，您可以简单地使用图像宽度的百分比。所以 100% 宽度会使图像与其所在的容器一样宽。然后，您可以将最大宽度设置为文件的宽度，这样它就不会扭曲或拉伸(stretch)。

如果您希望在将窗口调整为特定大小之前保持固定大小，可以使用媒体查询将元素的宽度设置为特定大小。