css - 图像最大宽度属性导致意外行为

Question

尽管它们都是行内元素，但图像变小了。为什么设置图像的 max-width: 100%; 是让图像缩小，但在其他情况下采用适当的宽度。

据我了解-

1. 没有分词优先于图像宽度。
2. 当我设置图像的 max-width 属性时，浏览器是否认为我告诉它缩小图像以适合其显式设置的容器宽度？

Codepen 链接:https://codepen.io/rpmcmurphy/pen/zYYoxjj

.ola {
  display: flex;
  width: 110px;
  background: red;
}

a {
  text-decoration: none;
}

a:first-child {
  color: black;
  background: yellow;
}

img {
  height: 30px;
  width: auto;
  max-width: 100%;
}

a:nth-child(2) {
  color: yellow;
  background: black;
  font-size: 20px;
}

<div class="ola">
  <a href="#">
    <img src="https://madmin.madcoderz.com/assets/images/favicon.png" alt="">
  </a>
  <a href="#">HelloWorld</a>
</div>

Answer 1

在这里，您面临一个复杂的案例 min-width constraint .如果你仔细观察，你会发现你有溢出(如果我们忽略最大宽度)

.ola {
  display: flex;
  width: 110px;
  background: red;
  border:2px solid green;
}
.ola a {
  text-decoration: none;
}
.ola a:first-child {
  color: black;
  background: yellow;
}
.ola a:first-child img {
  height: 30px;
  width: auto;
 /* max-width: 100%;*/
}
.ola a:nth-child(2) {
  color: yellow;
  background: black;
  font-size: 20px;
}

<div class="ola">
      <a href="#">
        <img src="https://madmin.madcoderz.com/assets/images/favicon.png" alt="">
      </a>
      <a href="#">HelloWorld</a>
    </div>

您的元素不会缩小，因为它们不能超过其内容大小。通过添加 max-width:100% 您正在改变这种行为。百分比需要考虑父级宽度，父级宽度取决于您应用 max-width 的内容。这里有一种循环。

为了更好地理解发生了什么，移除 min-width 约束，您将看到图像溢出 a 元素

.ola {
  display: flex;
  width: 110px;
  background: red;
  border:2px solid green;
}
.ola a {
  text-decoration: none;
}
.ola a:first-child {
  color: black;
  background: yellow;
  min-width:0;
}
.ola a:first-child img {
  height: 30px;
  width: auto;
 /* max-width: 100%;*/
}
.ola a:nth-child(2) {
  color: yellow;
  background: black;
  font-size: 20px;
}

<div class="ola">
      <a href="#">
        <img src="https://madmin.madcoderz.com/assets/images/favicon.png" alt="">
      </a>
      <a href="#">HelloWorld</a>
    </div>

然后，如果您添加 max-width，图像将在逻辑上缩小以避免溢出:

.ola {
  display: flex;
  width: 110px;
  background: red;
  border:2px solid green;
}
.ola a {
  text-decoration: none;
}
.ola a:first-child {
  color: black;
  background: yellow;
  min-width:0;
}
.ola a:first-child img {
  height: 30px;
  width: auto;
  max-width: 100%;
}
.ola a:nth-child(2) {
  color: yellow;
  background: black;
  font-size: 20px;
}

<div class="ola">
      <a href="#">
        <img src="https://madmin.madcoderz.com/assets/images/favicon.png" alt="">
      </a>
      <a href="#">HelloWorld</a>
    </div>

现在 min-width:0 变得无用了，因为导致该约束的图像宽度现在有了自己的约束，使其足够小以避免 a< 的初始溢出 (我知道，这也让我感到困惑......)

这就是为什么您认为 max-width 是在告诉浏览器图像应该缩小:

.ola {
  display: flex;
  width: 110px;
  background: red;
  border:2px solid green;
}
.ola a {
  text-decoration: none;
}
.ola a:first-child {
  color: black;
  background: yellow;
}
.ola a:first-child img {
  height: 30px;
  width: auto;
  max-width: 100%;
}
.ola a:nth-child(2) {
  color: yellow;
  background: black;
  font-size: 20px;
}

<div class="ola">
      <a href="#">
        <img src="https://madmin.madcoderz.com/assets/images/favicon.png" alt="">
      </a>
      <a href="#">HelloWorld</a>
    </div>

如果考虑 width:100%，您将得到相同的结果。

.ola {
  display: flex;
  width: 110px;
  background: red;
  border:2px solid green;
}
.ola a {
  text-decoration: none;
}
.ola a:first-child {
  color: black;
  background: yellow;
}
.ola a:first-child img {
  height: 30px;
  width: 100%;
}
.ola a:nth-child(2) {
  color: yellow;
  background: black;
  font-size: 20px;
}

<div class="ola">
      <a href="#">
        <img src="https://madmin.madcoderz.com/assets/images/favicon.png" alt="">
      </a>
      <a href="#">HelloWorld</a>
    </div>

要了解有关浏览器如何处理此类情况的更多详细信息，您可以引用规范:https://www.w3.org/TR/css-sizing-3/#percentage-sizing

这并不简单，因为您还需要考虑 flexbox 算法以及如何计算替换元素的宽度。我试图根据我对这种行为的理解给出最简化的解释(可能不是最准确的解释)