html - CSS 最大宽度 100% 响应式设计

Question

在我的一般 CSS 样式中，我为所有图像声明了一个 (max-width 100%) 规则。

这意味着我的图像将变得灵活并随其容器缩放，但绝不会超出其原始大小。

当屏幕达到 > 800 像素时，我使用媒体查询将图像向右浮动，将段落文本向左浮动(图像和段落现在并排放置)。

但是 - 当我将图像向右浮动时，我将其大小减小了 50%...我将图像作为目标并应用 width: 50%;

的 CSS 规则

但是图像仍然是灵活的...这是如何工作的？我假设 width: 50%; 规则会覆盖 max-width: 100%; 规则？

width: 50%; 是否改变图像容器的大小？因此 max-width: 100%; 规则仍然适用吗？

我希望以上内容有意义吗？

Answer 1

正如maioman所说。这些属性不会相互覆盖，它们协同工作。如果 50% 的宽度大于 100% 的图像，最大宽度将适用。如果这不是您的偏好，您可以覆盖 float 类中的最大宽度:

img.float-right {
  float: right;
  width: 50%;
  max-width: none;
}