在网格自动行中正确设置图像样式

Question

我正在开发一个网站启动页面，该页面应该显示相同高度的行。每行都有一个标题和更多的文本项和一个图像。 文本和图像项应在每行的底部对齐，如下面的屏幕截图所示

悬停时，图像应滑动到适合行的最大高度。

我的问题是： 我可以从父行 grid-auto-rows: 1fr; 访问 1fr 的当前值，以使悬停时的图像具有最大高度吗？

这是我的代码目前的样子：

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;
}

.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;
}

.jumbo__tag-high:hover{
  height: auto;
  max-height: 200px;
}

.a {background: lightblue; }
.b {background: lightgreen}
.c {background: lightgrey}

<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>

Answer 1

您可以将图像及其容器设为行的height:100%，然后考虑转换动画

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;
  top:0; /* added */
  
}

.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: 100%; /* added */
  overflow: hidden;
  background: none;
  cursor: pointer;
}
.jumbo__tag-high img {
   height:100%; /* added */
   transform:translateY(calc(100% - 30px));
   transition:1s all;
}

.jumbo__tag-high:hover img{
   transform:translateY(0%);
}

.a {background: lightblue; }
.b {background: lightgreen}
.c {background: lightgrey}

<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>