我需要将文本放在响应式图像的顶部(我正在使用引导程序 4)。但是文字在我之外,我尝试复制这封信(外面的数字不是)。文本被省略。
这是我的代码:
#content_div_one_photo {
height: 16rem;
width: 11rem;
border-radius: 10px;
border: 5px solid black;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div id="padre">
<img id="content_div_one_photo" class="img-fluid card-img" src="https://isstatic.aoverflow.com/aRTiRm.jpg">
<div class="card-title">Nombre</div>
</div>
诀窍是在父级上放置一个相对位置,在名称上放置一个绝对位置。这样,它将绝对相对于父母放置。
我希望通过这个示例,我可以帮助您解决疑问,图像保持在相对位置,文本保持在绝对位置,以便能够将其提升到具有 top 属性的图像上方,并赋予其 100% 的宽度,所以图像缩放