html - 我希望文本随着图像缩小而缩小。例如相对于图像保持相同的大小比例

Question

我希望文本随着图像的缩小而缩小。例如保持与图像大小相同的比例。我试过让文字消失，但这根本不是我想要的。

CSS:

.header{
    padding: 0.16px 16px;
    position: relative;
    box-sizing: inherit;
    display: block;
    font-size: 15px;
    line-height: 1.5;
    text-size-adjust: 100%;
    content: "";
    display: table;
    clear: both;
    font-family: "Montserrat", sans-serif;
}
.top-left{
    padding: 24px 48px;
    margin-left: 16%;
    position: absolute;
    left: 0px;
    top: 0px;
    box-sizing: inherit;
    display:block;
    font-size: 15px;
    line-height: 22.5px;
    text-size-adjust:100%;

}
.header-image{
    vertical-align:middle;
    border-style: none;
    box-sizing: border-box;
    width:65%;
    height:auto;
    margin:30px 250px;

}

@media screen and (max-width: 600px) {
    .header-image {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width:65%;

    }
}

.new-arrivals{
    position: absolute;
    display:block;
    left: 0;
    top: 0;
    margin:10px 5px 10px 0;
    font-size: 4vw !important;
    color:black;
    padding: 50px 100px;
    font-weight: 400;
    line-height: 60px;
}

.shop-now{
    border:none;
    display:inline-block;
    padding:12px 24px;
    margin: 260px 50px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    color:white;
    background-color:black;
    text-align:center;
    white-space: nowrap;
    font-size: 18px
}

.shop-now:hover{
    background-color: #ccc;
    color: black;
    border-style: ridge;
    border-color: black;
    border-width: 1px;
}

.designs{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 20px !important;
    font-family: "Montserrat", sans-serif;
    margin: 150px 0;
    color:black;
    padding: 24px 100px;
    font-weight: 400;
}

HTML:

<div class="header">
    <img class="header-image" src="img/jeans.jpg" alt="Jeans">
      <div class="top-left">
        <h1 class="new-arrivals">New arrivals</h1> 
        <p><h3 class="designs">Our new season collection is here</h3> </p>
        <p><a href=".products" class="shop-now">SHOP NOW</a></p>
      </div>
</div>

Answer 1

如果您希望文本像图像一样响应，您需要在 CSS 文件中设置 h1 元素样式。例如:

.new-arrivals {
  font-size:clamp(2em, 4vw, 4em); /* set min, ideal value, max */
}