Question

我正在尝试创建一个带有图像的div，并在图像上方叠加文字-不太困难。

但是我希望图像可以根据容器缩放（它将在电子邮件中使用，因此应该适合所有设备）-也并不困难。

对我来说，比较复杂的一点是我希望文本与图像一起缩放，例如，如果容器为50％，则字体大小将为50％，位置也会缩放，以便整个div看起来完全像它的尺寸仅为100％，仅为尺寸的一半。

我现在还不能完全解决这个问题。

这可能吗？如果可以的话，您能为我提供一些帮助吗？

这是我到目前为止的位置：

  <!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<style>

.container {
    position: relative;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;


}

/* Bottom left text */
.doctor-name {
    position:absolute;
    top: 40%;
    font-family: ProximaNova-Semibold;

    font-size: 5vw;
    color: #313439;
    letter-spacing: -0.64px;
    text-align: left;
    line-height: 32px;

}

.grade{
    position:absolute;
    background: #F6F7F8;
    font-family: ProximaNova-Semibold;
    font-size: 16px;
    color: #00446D;
    letter-spacing: 0;
    text-align: left;
    width: 50px;
    top: 44%;
}

/* Top left text */

.text-section {
    position: absolute;
    left: 12.5%;
    top:0px;
    right: 12.5%;
    height: 100%;


}

}
</style>
</head>

<body>
    <div class="container">
        <img src="profile-iphone-mockup-base.png" alt="Snow" style="width:100%;">
        <div class="text-section">
            <div class="doctor-name">Dr. Myra Kennedy</div>
            <div class="grade">Cardiac</div>


        </div>
      </div>
</body>

</html>

您可以在图像上缩放HTML文本吗

0 个答案: