CSS最大寬度100％自適應設計

Question

在我的一般CSS樣式中，我為所有圖像聲明了(max-width 100%)規則。

這意味着我的圖像將變得靈活並隨其容器縮放，但絕不會超出其原始大小。

當屏幕達到> 800px時，我使用媒體查詢使圖像向右浮動，段落文本向左浮動（圖像和段落現在並排放置）。

但是-當我將圖片向右浮動時，我將圖片的尺寸減小了50％...我將圖片定位為目標，並應用了CSS width: 50%;規則width: 50%;

但是圖像仍然很靈活...這是如何工作的？ 我假設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;
}