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

Answer 2

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

如果是这样，您可以使用flexbox执行此操作。但要小心：所有浏览器都不支持它。但两者都不是.sticky { /* Everything you already have here... */ display: flex; flex-direction: column; }。

(function () { 
    this.bob = function bob() {};

    window.alert(typeof(bob) + ', ' + typeof(this.bob) + ', ' + (bob == this.bob));
})();

https://codepen.io/anon/pen/dNgZQx

图像溢出粘性div尺寸

2 个答案: