Html 我如何使内容和图像具有响应性

我有一个透明的圆圈，它是一个图像。我想把内容放在圆圈内。但是当我改变屏幕大小的时候，要么圆圈改变了大小，要么圆圈内的文本离开了圆圈。我该如何解决这个问题

我用的是bootstrap4

.img-1{
高度：自动；
最大宽度：140%；
-ms变换：旋转（30度）；
-webkit变换：旋转（3deg）；
变换：旋转（30度）；
}
.文本块1{
位置：绝对位置；
底部：250px；
左：220px；
颜色：白色；
左侧填充：5px；
右侧填充：5px；
垫面：5px；
垫底：5px；
}

智能设计课程


我们的计划和
课程经过深思熟虑的策划，旨在激发创造力，
培育成长，
拓展界限

您需要采取以下步骤：

.container

应该是

位置：相对的

，因此文本将是相对于它的

位置：绝对的

要使文本始终与中心对齐，有一些技巧，但我最喜欢的是

{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（50%，50%）；
}

使

字体大小与屏幕大小相对应。您可以通过
媒体查询

.container{
位置：相对位置；
}
img{
最大宽度：100%；
}
.img-1{
高度：自动；
最大宽度：140%；
-ms变换：旋转（30度）；
-webkit变换：旋转（3deg）；
变换：旋转（30度）；
}
.文本块1{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：白色；
左侧填充：5px；
右侧填充：5px；
垫面：5px；
垫底：5px；
}

智能地

设计课程

我们的节目和

课程是

深思熟虑地策划

激发创造力，

培育成长和
推边界

非常感谢您提供详细的onw