宽度和最大宽度（css）

我在阅读一篇解释css属性

width

和

max width

的文章时，遇到了以下示例：

img { 
width: 100%;
max-width:700px;} 

这意味着图像的固定宽度应该占据父元素的整个大小 — 如果明确说明了父元素的宽度， — 所有这些都是百分之百的，但是图像永远不应该超过700px。这意味着图像可以小于700px，如果这更适合它的情况（例如较小的窗口大小），但它永远不应该大于700px。所以这里有两个条件，图像的宽度可以是父元素的100%，如果它愿意的话，但是它不能超过700px

---

但是没有必要在这里添加

宽度：100%

？

max width:700px

是否意味着如果父元素小于700px，宽度将为100%？

首先，宽度定义特定元素的宽度，而max width定义元素允许的最大大小

其次，宽度：100%使用父对象的宽度计算当前宽度值，而最大宽度：100%使用其自身的原始宽度计算最大大小。因此，宽度为100%的图像可能比其原始大小大（根据其父宽度进行缩放）。另一方面，最大宽度为100%的图像可以更小，但决不能放大其原始大小（最大有效宽度=100%x原始宽度）。这就是为什么它被称为流体图像

假设你为一个图像设置了宽度：700px。当您调整屏幕尺寸时，图像保持稳定的700px。假设你在一部手机上，屏幕宽度小于700px，图像将无法显示在屏幕上。因此，它将扩展您的页面，使其不利于移动。同时，当您设置最大宽度：700px时，它将重新调整大小至700px，但当屏幕变小且图像不适合屏幕时，它将自动重新调整大小以适合屏幕。

• 据我所知，您希望使图像适合其父容器的大小，并限制图像宽度不超过700px
• 然后我会说是的，没有必要给出“宽度：100%”；无论哪种方式，宽度的默认值都会被选中，即“自动”
• 因此，每当您的父容器小于700px时，您的图像将适合您的容器（因为“width:auto；”）

注意-请参考CSS的“object fit:contain”属性，因为这也会有所帮助。

但是在这里添加宽度：100%不是没有必要吗？“最大宽度：700px”是否意味着如果父项小于700px，宽度将为100%？-->如果使用的是

div

或任何块元素，则不需要设置宽度：100%