CSS：Width和Max-Width [英] CSS: Width and Max-Width

问题描述

为什么：

  width：98％; 
 max-width：1140px; 
  

执行与

相同的操作

  width：1140px; 
 max-width：98％; 
  

第一个是有意义的，我说的宽度是98％，但不去大于1140像素宽。第二个但是会说页面是1140像素宽，但随后会像页面一样大，98％的权利？所以例如过去1140px ...但显然不是因为它与第一个...可以有人解释为什么...感谢

解决方案

从我对属性的理解：

  if width> max-width use max-width 
 if max-width> width use width 
  

因此，使用您的示例，这必须意味着1140px严格小于98％

缩小您的浏览器屏幕，您将获得不同的结果。

有些不相关，但我发现 max-width （和相应的属性 max-height 在Internet Explorer中的图像，并发现这有助于哄骗它使用正确的值：

  img {
 max-width：150px; 
 max-height：120px; 
 width：auto！important; 
 height：auto！important; 
} 
  

没有最后两个属性，大多数符合标准的浏览器都能正确地保持宽高比，但是Internet Explorer不会这样做。

编辑：看起来像我说的基本上和其他人一样的答案。 / p>

Why does:

width: 98%;
max-width: 1140px;

do the same as

width: 1140px;
max-width: 98%;

The first one makes sense in that I'm saying the width is 98% but don't go larger than 1140px wide. The second one however would say the page is 1140px wide but then WOULD go as large as the page at 98% right??? so e.g past 1140px... but apparently not as it does the same as the first... can someone explain why... Thanks

解决方案

From my understanding of the properties:

if width > max-width use max-width
if max-width > width use width

Therefore, using your example, this must mean that 1140px is strictly less than 98% at the screen resolution you are viewing at.

Shrink your browser screen and you will get different results.

It's somewhat unrelated, but I've found max-width (and the corresponding property max-height) to be a problem with images in Internet Explorer, and found this to be helpful in coaxing it to use the correct values:

img {
    max-width: 150px;
    max-height: 120px;
    width: auto !important;
    height: auto !important;
}

Without the last two properties, most standard-compliant browsers correctly maintain aspect ratio, but Internet Explorer will not unless you do that.

Edit: It looks like I've said basically the same answer as everyone else.

这篇关于CSS：Width和Max-Width的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！