图像溢出粘性div尺寸

我在我的页面上有一个粘性div，基于屏幕大小（因此它可以在横向和纵向之间切换）以及其中的图像具有高度。我遇到了一个问题，图像在其父母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; 
}

来源

2017-02-09 Jeffrey Russell

可以更改HTML？ – Pete

是的，我基本上可以在任何必要的，但它需要保留图片上方的标题的功能在一个容易粘滞的容器中。 –

我吨我终于明白你想要达到的目标。您希望图像大小适应，以适应蓝色粘性块，而此块保持100px高。是对的吗？

如果是这样，您可以使用flexbox来做到这一点。但要小心：它不被所有浏览器支持。但都不是position: sticky。

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

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

来源

2017-02-09 12:49:51 Eria

这可能只是我，但是在55码时，你的codepen不会做它应该做的事情。图像仍然溢出容器。 –

你说得对，它在Chrome上不起作用。我用Firefox 51测试了它。这就是新的CSS属性... :-( – Eria

刚刚在firefox中测试过，这太棒了，我希望它能以相同的方式在chrome中工作。 –

设置显示表中为.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

来源

2017-02-09 12:37:02 madalinivascu

您的答案如此接近，但当div增加时，图片不会展开。 –

@JeffreyRussell要扩大/缩小图像及其父母大小，应该指定图像的高度或宽度，以百分比表示。 –

但我只注意到你已经说过粘性'div'具有固定的高度和宽度，可能这就是为什么madalin建议他的答案。 –

图像溢出粘性div尺寸

回答

相关问题