Мне нужно поместить текст поверх отзывчивого изображения (я использую bootstrap 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>
Хитрость заключается в том, чтобы указать относительную позицию родителя и абсолютную позицию имени. Таким образом, он будет размещен абсолютно по отношению к родителю.
Я надеюсь, что с этим примером я могу помочь в ваших сомнениях, изображение остается в относительном положении, а текст в абсолютном положении, чтобы иметь возможность поднять его над изображением с верхним свойством и придать ему ширину 100%, поэтому что изображение масштабируется