Div中的图像，最大宽度不起作用

Question

我将max-width应用于包含图片的div，但图片会忽略应用的值。

截图：

段：

.screenshot {
      max-width: 460px;
      margin: 27px;
    }
    
    .description {
      max-width: 705px;
    }

<div class="screenshot">
      <img src="http://placehold.it/850x850" alt="App">
    </div>
    <div class="description">text you see in screenshot.
    </div>

Answer 1

最大宽度必须在图像上。

图片元素并不关心他们的父母告诉他们的尺寸 - 他们只是拉伸父容器以适应任何方式。

编辑：例如，您可以创建一个新规则，其选择器为 .screenshot img ，然后在那里应用最大宽度。

编辑如果您使用ID尝试此规则，它将无效，它只适用于类。

Answer 2

以下是您可以尝试的一些选项

尝试使用div.screenshot {max-width：460px}来强化您的目标选择

尝试使用id标记而不是div，因为id标记获得更多优先级

尝试在div中添加！important，即.screenshot {max-width：460px！important}