CSS Max-width 100％响应式设计

Question

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

这意味着我的图像将变得灵活并随容器扩展，但永远不会超出其原生大小。

当屏幕达到＆gt; 800px我使用媒体查询将图像向右浮动，并保留段落文本（图像和段落现在是并排）。

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

的CSS规则

然而，图像仍然灵活......这是如何工作的？我认为width: 50%;规则会覆盖max-width: 100%;规则吗？

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

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

Answer 1

如果发生冲突，max-width和max-height属性会覆盖width和height属性，因此您的假设是落后的。

Answer 2

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

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