javascript - 图像溢出粘性 div 尺寸

Question

我的页面中有一个粘性 div，它的高度基于屏幕尺寸(因此它可以在横向和纵向之间切换)和其中的图像。我遇到了图像无法在其父级 div 中正确调整自身大小的问题。我不能依赖于容器 div 的高度，因为它取决于屏幕尺寸。我也不能依赖图像上方文本的高度。这是问题的一个例子。

Codepen

<div class="textHolder">
    <div class="sticky">
        <h3>Java script</h3>
        <img src="https://placehold.it/350x150" />
    </div>
</div>

CSS:

.textHolder{
  margin:100px auto;
  width:700px;
  height:300px;
  background-color: #FFEEE7;
  padding:15px;
}
.sticky img{
  height: 100%;
  margin: auto;
}
.sticky h3 { 
  width: 100%;
  padding: 0;
  margin: 0;
}
.sticky{
  position:-webkit-sticky;  
  position: sticky;  
  background:rgb(50,50,250);
  width:100%;
  height:100px;
  border-radius:5px;
  text-align:center;
  line-height:46px;
  color:white;
  font-size:30px;
  top:10px;
}

Answer 1

将 .sticky 元素的显示设置为表格

.sticky{
  position:-webkit-sticky;  
  position: sticky;  
  background:rgb(50,50,250);
  width:100%;
  height:100px;
  border-radius:5px;
  text-align:center;
  line-height:46px;
  color:white;
  font-size:30px;
  top:10px;
  display:table;
}

演示:https://codepen.io/anon/pen/LxgOOq