Html 如何使变换后的字体对图像有响应性_Html_Css

Html 如何使变换后的字体对图像有响应性

html css

Html 如何使变换后的字体对图像有响应性,html,css,Html,Css,我有一个设计，我正试图实现只有CSS和HTML。这是我在photoshop中做的一个快速模型的剪贴这是很容易实现的，但一旦我试图使其响应，我击中了各种各样的障碍。通过响应，我的意思是，一旦图像缩放，图像侧面的文本将保持其比例这是我目前掌握的代码 <!DOCTYPE html> <html> <head> <title>Bob Marley Tribute</title> <style>

我有一个设计，我正试图实现只有CSS和HTML。这是我在photoshop中做的一个快速模型的剪贴

这是很容易实现的，但一旦我试图使其响应，我击中了各种各样的障碍。通过响应，我的意思是，一旦图像缩放，图像侧面的文本将保持其比例

这是我目前掌握的代码

<!DOCTYPE html>
<html>

<head>
    <title>Bob Marley Tribute</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Raleway:400,400i,600,600i,900,900i&display=swap');
        @import url('https://fonts.googleapis.com/css?family=Arvo&display=swap');

        body {
            font-family: 'Arvo', serif;            
            margin: 0;
        }

        h1, figure{
            margin: 0;
        }

        h1 {
            font-weight: 900;
            text-transform: uppercase;
        }

        h2 {
            font-weight: 600;
        }

        .responsive {
            max-width: 100%;
            display: block;
            height: auto;
        }

        p, figcaption{
          font-family: 'Raleway', sans-serif;
        }

        .img-div{
            display: flex;
            align-content: center;
            justify-content: center;
            margin: 0;
            position: relative;

        }

        .img-div h1{
            display: flex;
            flex-direction: column;
            justify-content: center;
        }


        .img-div .lname{
            /*transform: rotate(90deg);*/
            font-size: 350%;
            background-color: aqua;
            writing-mode: vertical-rl;
            /*margin-right: -11.269vw;*/ 

        }

        .img-div .fname{
            /*align-self: flex-end;*/
            align-self: flex-end;
            font-size: 5vw;
            background-color: red;
            position: absolute;
            top:0;
        }

    </style>
</head>

<body class="main" id="main">

    <header>        
        <nav style="display: none;">
            <ul>
                <li><a href="#">Section 1</a></li>
                <li><a href="#">Section 2</a></li>
                <li><a href="#">Section 3</a></li>
            </ul>
        </nav>
    </header>
    <main>

        <div class="img-div" id="img-div">
            <h1 id="title"><span class="fname">Bob</span> <span class="lname">Marley</span></h1>
            <figure>
                <img class="responsive" src="./bobmarley.jpg" alt="" />
                <figcaption id="img-caption">Bob Marley flashing his dreadlocks on stage</figcaption>
            </figure>
        </div>




    </main>
</body>

</html>

如何实现此效果？

首先，将图形的大小设置为vw视口的宽度：例如90vw

然后再次设置MARLEY在vw中的字体大小：如果将数字设置为90vw，则为10vw

因此，MARLEY的宽度加上人物的宽度将占据整个窗口的宽度

这是我的代码，它似乎工作正常，我得到了您想要的结果：

<!DOCTYPE html>
<html>

<head>
    <title>Bob Marley Tribute</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Raleway:400,400i,600,600i,900,900i&display=swap');
        @import url('https://fonts.googleapis.com/css?family=Arvo&display=swap');
        body {
            font-family: 'Arvo', serif;            
            margin: 0;
        }
        h1, figure{
            margin: 0;
        }
        h1 {
            font-weight: 900;
            text-transform: uppercase;
        }
        h2 {
            font-weight: 600;
        }
        .responsive {
            max-width: 100%;
            vertical-align: middle  ;
        }
        p, figcaption{
          font-family: 'Raleway', sans-serif;

        }
        .img-div{
            display: flex;
            margin: 0;
        }
        .img-div h1{
            display: flex;
            flex-direction: column;
            justify-content: left;
            width: 10vw;
        }
        .img-div .lname{
            font-size: 10vw;
            background-color: aqua;
            writing-mode: vertical-rl;
            flex-grow: 1;
            letter-spacing: 2vw;
        }
        .img-div .fname{
            align-self: flex-end;
            font-size: 5vw;
            background-color: red;
        }
        figure {
            width: 90vw;
        }
    </style>
</head>
<body class="main" id="main">
    <header>        
        <nav style="display: none;">
            <ul>
                <li><a href="#">Section 1</a></li>
                <li><a href="#">Section 2</a></li>
                <li><a href="#">Section 3</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="img-div" id="img-div">
            <h1 id="title"><span class="fname">Bob</span> <span class="lname">Marley</span></h1>
            <figure>
                <img class="responsive" src="./bobmarley.png" alt="" />
                <figcaption id="img-caption">Bob Marley flashing his dreadlocks on stage</figcaption>
            </figure>
        </div>
    </main>
</body>
</html>

您试图将文本缩放到元素大小，而这在CSS中是不可能的。您将需要javascript