移动设备上定位的绝对元素高度超过父元素

Question

我有一个元素，它的背景图像在底部包含一个绝对定位的元素。

当屏幕宽度变窄时，绝对定位的元素高度会增加并超过父元素。众所周知，位置绝对元素会脱离流，因此父元素的高度不会更改。

$(window).ready(function() {
if ($(window).width() <= 767) {
var heig = $('.overlay').height(),
parent = $('.parent');
parent.css('height', heig + 300 + 'px');
}
});

html,
body {
margin: 0;
height: 100%;
}
* {
box-sizing: border-box;
}
.parent {
position: relative;
min-height: 100vh;
background-image: url(http://placehold.it/1000);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.overlay {
background: #376c8d;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
text-align: center;
padding: 30px 20px;
border-radius: 160px 160px 0 0;
font-size: 24px;
opacity: 0.8;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="overlay">
<img src="http://placehold.it/100" />
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing eli</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="/">Link</a>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing eli</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="/">Link</a>
</div>
</div>

有没有办法将.overlay保持在底部，但显示所有内容？CSS有类似的解决方案吗？

Answer 1

通过使一个或另一个属性相对于另一个来约束比例。

background-size: 100% auto;

编辑：

使用响应SVG作为.overlay以避免布局回流。如果适合您的工作流程或舒适度，也可以将内容输出为图像。