＜img＞元素的可见高度是什么呢？

本文链接：https://blog.youkuaiyun.com/weixin_52648900/article/details/145612314

<img> 标签的可见高度是由多种因素决定的，其中包括元素本身的属性、CSS样式、父元素的影响以及浏览器的渲染规则。

1. <img> 元素的自然尺寸（Natural Size）

当在网页上插入一个 <img> 元素时，浏览器会根据图片的实际文件来计算其自然宽度和自然高度。这两个值代表图片的真实尺寸，即未经过任何缩放的大小。

<img src="./doraemon.png" alt="">

访问图片的自然尺寸：

2. CSS 样式对 <img> 高度的影响

在 img 上设置了 width 和 height，这些值会影响图片的可见尺寸。如果设置 auto，则图片会根据其自然宽高比自动调整。

如果只设置一个维度（比如 width），另一个维度会根据图片的原始比例自动计算。

<img src="./doraemon.png" width="300" height="280" alt="" />

max-width、max-height 和 min-width、min-height 这些属性限制了图片的最大和最小尺寸。

如果 <img> 元素的大小被设置为固定宽高，可以使用 object-fit 来控制图片在容器中如何调整：

contain：保持比例缩放，直到图片完全显示在容器内。
cover：保持比例缩放，直到图片完全覆盖容器（可能部分内容被裁剪）。
fill：不保持比例，拉伸填满整个容器。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      img {
        width: 400px;
        height: 200px;
        border: 1px solid palevioletred;
      }
    </style>
  </head>
  <body>
    <img src="./doraemon.png" style="object-fit: contain" alt="" />
    <img src="./doraemon.png" style="object-fit: cover" alt="" />
    <img src="./doraemon.png" style="object-fit: fill" alt="" />
  </body>
</html>

3. 父元素的影响

下面代码 img 的可见宽度是多少？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        box-sizing: border-box;
      }
      div,
      a,
      img {
        border: 5px solid palevioletred;
        padding: 10px;
      }
      div {
        width: 500px;
      }
      a {
        width: 300px;
      }
      img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div>
      <a href="#">
        <img />
      </a>
    </div>
  </body>
</html>

宽度：470px。

注意：百分比 % 相对的是包含块，而不是其父元素！！普通元素的包含块在其第一个祖先块盒的内容盒里面！！

a 元素默认生成行盒。

因此，img 的第一个祖先块盒是 div，div 的内容盒受 box-sizing: border-box 的影响，其宽度是总宽度 - 左右 border - 左右 padding = 500 - 5 - 5 - 10 - 10 = 470px。so，img 的可见宽度 = 470px。

如果是下面的呢？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        box-sizing: border-box;
      }
      div,
      a,
      img {
        border: 5px solid palevioletred;
        padding: 10px;
      }
      div {
        width: 500px;
      }
      a {
        width: 300px;
        display: block;
      }
      img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div>
      <a href="#">
        <img />
      </a>
    </div>
  </body>
</html>

让 a 元素变成块盒，因此 img 元素相对的祖先元素是 a，其可见宽度 = 270px。