能否获取父级grid-auto-rows:1fr的当前值设置hover图片最大高度？

首先直接回答你的核心问题：CSS无法直接获取grid-auto-rows: 1fr的计算值，因为1fr是相对单位，最终像素高度由浏览器根据容器尺寸和子项数量动态计算。不过我们可以通过两种方式实现你要的hover效果，不用纠结于直接获取1fr的数值：

方案一：纯CSS实现（推荐，无需JS） #

利用Grid子项本身的高度特性，让hover时的图片容器直接填满当前Grid行的高度，完全贴合你的需求：

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<style>
html, body {margin:0; padding:0}
.jumbo {
 width: 100%; 
 height: 100vh; 
 background: yellow; 
 display: grid; 
 grid-auto-rows: 1fr;
}
.jumbo__item {
 position: relative; 
 box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75); 
 font-size: 20vh; 
 padding: 0 0 0 10px;
 overflow: hidden;
}
.jumbo__rowtags{
 position: absolute; 
 bottom: 0; 
 right: 0;
 z-index: 1;
}
.jumbo__tag {
 margin-right: 10px; 
 display: inline-block; 
 background: white; 
 vertical-align: bottom; 
 height: 30px; 
 padding: 0 10px; 
 font-size: 20px; 
 line-height: 30px;
}
.jumbo__tag-high{
 height: 30px; 
 overflow: hidden; 
 background: none; 
 cursor: pointer;
 transition: all 0.3s ease;
 position: relative;
}
.jumbo__tag-high img {
 position: absolute;
 bottom: 0;
 right: 0;
 width: 350px;
 transition: all 0.3s ease;
}
/* hover时的核心变化 */
.jumbo__tag-high:hover{
 height: 100%;
 max-height: 100%;
 background: white;
}
.jumbo__tag-high:hover img {
 bottom: calc(100% - 200px);
 max-height: calc(100% - 30px);
}
.a {background: lightblue; }
.b {background: lightgreen}
.c {background: lightgrey}
</style>
</head>
<body>
<div class="jumbo">
 <div class="jumbo__item a"> Dogs </div>
 <div class="jumbo__item b"> and 
 <section class="jumbo__rowtags">
 <span class="jumbo__tag jumbo__tag-high"><img src="https://placeimg.com/350/200/nature"></span>
 <span class="jumbo__tag">Hello</span>
 <span class="jumbo__tag">World</span>
 </section>
 </div>
 <div class="jumbo__item c"> cats </div>
</div>
</body>
</html>

核心调整说明： #

• 给.jumbo__tag-high添加过渡动画，让hover滑动效果更丝滑
• hover时将.jumbo__tag-high的height设为100%，直接继承Grid行的高度（也就是1fr的计算值）
• 通过绝对定位控制图片位置，hover时从底部滑到顶部，同时限制最大高度避免超出Grid行

方案二：JS动态获取Grid行高度（适合需要精确数值的场景） #

如果确实需要获取grid-auto-rows:1fr的计算值，可以通过JS获取Grid子项的实际高度，赋值给CSS变量后在hover时使用：

关键代码片段 #

// 页面加载完成后执行
window.addEventListener('load', () => {
  // 任意一个Grid子项的高度就是1fr的计算值（所有行等高）
  const rowHeight = document.querySelector('.jumbo__item').offsetHeight;
  // 将高度赋值给全局CSS变量
  document.documentElement.style.setProperty('--grid-row-height', `${rowHeight}px`);
  
  // 监听窗口 resize，动态更新行高
  window.addEventListener('resize', () => {
    const newRowHeight = document.querySelector('.jumbo__item').offsetHeight;
    document.documentElement.style.setProperty('--grid-row-height', `${newRowHeight}px`);
  });
});

然后在CSS中使用这个变量：

.jumbo__tag-high:hover{
 height: auto;
 max-height: var(--grid-row-height);
}

注意事项： #

• 必须监听窗口resize事件，确保窗口尺寸变化时行高同步更新
• 这种方式依赖JS支持，不如纯CSS方案简洁

内容的提问来源于stack exchange，提问作者Anatol