Javascript 图像溢出粘性div维度

我的页面中有一个粘滞的div，它的高度取决于屏幕大小（因此它可以在横向和纵向之间变化）和其中的图像。我遇到了一个问题，图像在其父

div

中无法正确调整大小。我不能依赖于容器的高度

div

，因为它取决于屏幕大小。我也不能依赖图片上方文本的高度。这里有一个问题的例子

---

将.sticky元素的显示设置为table

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

---

演示：

我想我终于明白了你想要实现的目标。您需要调整图像大小，使其适合蓝色粘性块，而此块保持100px高。是这样吗

如果是这样，您可以使用flexbox来实现这一点。但要小心：并非所有浏览器都支持它。但是

位置：sticky

也不是

.sticky {
    /* Everything you already have here... */
    display: flex;
    flex-direction: column;
}

---

你能更改html吗？是的，我基本上可以在任何必要的情况下更改，但它需要在一个粘性容器中保留图像上方标题的功能。可能只有我，但在chrome 55中，你的代码笔不能完成它应该做的事。图像仍然溢出容器。你是对的，它在Chrome上不工作。我用Firefox51测试了它。这就是新CSS属性的特点…：-（刚刚在firefox上测试过，太棒了。我希望它能在chrome上以同样的方式工作。我正在尝试让它在chrome上工作。但目前没有成功…chrome似乎不能很好地处理

flied wrap:nowrap

默认值。同样适用于

flex-shrink

。如果你只添加了object-fit:contain；那么它在chrome上工作；您的答案非常接近，但当div增大时，图像不会扩展。@JeffreyRussell要扩展/缩小图像及其父级大小，您应该以百分比指定图像的高度或宽度。但我刚刚注意到，您已声明sticky

div

具有固定的高度和宽度，这可能就是madalin的原因建议他的答案。是的，我在我的问题中改变了这一点。这个答案非常适合我所问的问题，但这并不是我真正的意思。

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

.sticky {
    /* Everything you already have here... */
    display: flex;
    flex-direction: column;
}