Question

有人能告诉我width和max-width之间的关系（例如哪个覆盖像素，百分比等）？

如果我愿意，我该如何使用它们：

调整窗口大小时自动缩放图像，并在图像达到原始大小时停止缩放？
保持固定大小，直到我将窗口调整为某个小尺寸，然后开始自动调整大小

Answer 1

宽度是元素的实际宽度，而max-width是width属性的最大宽度。最大宽度只是width属性的限制。

如果要根据窗口大小调整图像大小，可以简单地使用百分比作为图像的宽度。因此，100％宽度将使图像与其所在的容器一样宽。然后，您可以将max-width设置为文件的宽度，以使其不会扭曲或拉伸。

如果要在将窗口大小调整为特定大小之前保持固定大小，可以使用媒体查询将元素的宽度设置为特定大小。

Answer 2

来自规范：

10.4最小和最大宽度：'min-width'和'max-width'

这两个属性允许作者将内容宽度约束为a   一定的范围。

以下算法描述了两个属性如何影响   used value属性的'width'：
根据上面'min-width'下的规则计算暂定使用的宽度（不包含'max-width'和"Calculating widths and margins"）。

如果暂定使用的宽度大于'max-width'，则会再次应用规则above，但这次使用的是   值'max-width'作为'width'的计算值。

如果生成的宽度小于'min-width'，则会再次应用规则above，但这次使用的值为   'min-width'作为'width'的计算值。

但是，对于具有固有比率的替换元素和两者   'width'和'height'指定为＆＃39; auto＆＃39;，算法是   如下：

从表中选择已解析的高度和宽度值   适当的约束违规。取最大宽度和最大高度为   max（min，max）使min≤max成立。在这张表中w和h   代表忽略宽度和高度计算的结果   'min-width'，'min-height'，'max-width'和。'max-height'   {{3}}属性。通常这些是固有宽度   和高度，但它们可能不是在被替换元素的情况下   内在比率。
Constraint Violation                   | Resolved Width                   | Resolved Height
------------------------------------------------------------------------------------------------------------
none                                   | w                                | h
w > max-width                          | max-width                        | max(max-width * h/w, min-height)
w < min-width                          | min-width                        | min(min-width * h/w, max-height)
h > max-height                         | max(max-height * w/h, min-width) | max-height
h < min-height                         | min(min-height * w/h, max-width) | min-height
(w > max-width) and (h > max-height),  | max-width                        | max(min-height, max-width * h/w)
    where (max-width/w ≤ max-height/h) |                                  |
(w > max-width) and (h > max-height),  | max(min-width, max-height * w/h) | max-height
    where (max-width/w > max-height/h) |                                  |
(w < min-width) and (h < min-height),  | min(max-width, min-height * w/h) | min-height
    where (min-width/w ≤ min-height/h) |                                  |
(w < min-width) and (h < min-height),  | min-width                        | min(max-height, min-width * h/w)
    where (min-width/w > min-height/h) |                                  |
(w < min-width) and (h > max-height)   | min-width                        | max-height
(w > max-width) and (h < min-height)   | max-width                        | min-height

Answer 3

这是mozilla的定义：

max-width CSS属性用于设置给定元素的最大宽度。它可以防止width属性的已使用值变得大于为max-width指定的值。

使用max-width，您可以将最大尺寸设置为宽度。

调整图像大小时，宽度将设置为“width”或“max-width”。

请参阅以下示例：

/* image width will be always 500px */
img{
  max-width:500px;
}
/* image width will be 100% of parent*/
img{
   width:100%;
   height:200px;
   float:left;
   display:block;
   background: #00f;
}

这是我的jsfiddle：http://jsfiddle.net/jmxw7j4p/

您可以使用媒体查询：How to write a media query in CSS?

Answer 4

调整窗口大小时自动缩放图像，并在调整时停止缩放图像达到原来的大小？

var w = 100;

$('#bigger').click(function() {
  w+=25;
  if (w>100)
    w= 100;
  $('div').css('width', w+'%');
});

$('#smaller').click(function() {
  w-=25;
  if(w<0)
    w=0;
  $('div').css('width', w+'%');
});

div {
    width: 100%;
    border: 1px red solid;
    transition: 2s;
}
img {
    width: 100%;
    height: 200px;
    max-width: 300px;
    border: 1px green solid;
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="smaller">reduce container width</button>
<button id="bigger">enlarge container width</button>
<div>
    <img alt="This is an image!" />
</div>

保持固定大小，直到我将窗口调整到一定的小尺寸然后开始自动调整大小

    img {
        width: 300px;
    }
    @media (max-width:768px) {
        img {
            width: 100%;
        }
    }

<img alt="That's another image!" />

图像的宽度和最大宽度属性

4 个答案: