求大佬解惑：高度与宽度百分比设置问题

用户481178812872025-10-14 13:46

求大佬解惑：高度与宽度百分比设置问题

下面代码flex项目设置了aspect-ratio:1后，其中的img元素的width和height的百分比是相对于什么值？为啥增加文字后，整体items会被撑大，但是img大小并不会变化？难道其中有计算顺序的问题？如果有那么这些知识该去哪里学习？求大佬解惑

HTML 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>🖼️ 图片撑满格子 vs 未撑满对比示例</title>
  <style>
    /* 页面基础样式 */
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      padding: 20px;
    }

    h1, h2 {
      text-align: center;
      color: #333;
    }


    .grid-container-bad {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 20px;
      max-width: 600px;
      margin: 40px auto;
    }

    .grid-item-bad {
      aspect-ratio: 1;
      background: #ffe;
      border: 2px solid #999;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 10px;
    }

    .grid-item-bad img {
      width: 100%;    /* 这里的宽度和高度百分比是如何计算出来的？ */
      height: 100%;
      object-fit: cover;
    }

    .grid-item-bad p {
      margin: 5px 0 0;
      font-size: 12px;
      text-align: center;
    }

   
  </style>
</head>
<body>

  <div class="grid-container-bad">
    <div class="grid-item-bad">
      <img src="https://picsum.photos/300/300?random=5" alt="图片5">
      <p>图片+文字</p>
    </div>
    <div class="grid-item-bad">
      <img src="https://picsum.photos/300/300?random=6" alt="图片6">
      <p>图片+文字</p>
    </div>
    <div class="grid-item-bad">
      <img src="https://picsum.photos/300/300?random=7" alt="图片7">
      <p>图片+文字</p>
    </div>
    <div class="grid-item-bad">
      <img src="https://picsum.photos/300/600?random=8" alt="图片8">
      <p>图片+文字</p>
    </div>
  </div>

</body>
</html>