html - 创建自适应背景图像

Question

我想让文本在任何屏幕分辨率下始终位于白色 block 内？

因此我不想为每 100 像素添加 ant 媒体查询。

HTML

<div class="wrapper">

  <div class="left-wrapper"></div>

  <div class="right-wrapper">
    <div class="conclusion-block">
      <ul class="conclusion-list content-list">
         <li>Sincerely yours,/Sincerely,</li>
         <li>Best regards,/All the best,</li>
         <li>Regards,</li>
         <li>Thank you for your consideration,</li>
         <li>Respectfully,</li>
      </ul>
    </div>
  </div>

</div>

CSS

.wrapper {
      display: flex
}

.left-wrapper {
    width: 35%;  
}

.right-wrapper {
    width: 65%;
}

.conclusion-block {
    background: url(https://i.imgur.com/NKTY6Du.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

ul.conclusion-list {
    padding-bottom: 75px;
    padding-top: 40px;
    padding-left: 100px;
}

.conclusion-list li {
    font: 18px/33px Open Sans;
    font-weight: 600;
    letter-spacing: 0.18px;
    color: #333333;
    margin-bottom: 0;
}

强调文本 https://i.imgur.com/7B53HH7.png

右图 https://i.imgur.com/16hTMJ4.png

Answer 1

在背景图片上使用绝对单位，使其无论屏幕尺寸如何都具有相同的尺寸。我只是在下面的代码片段中玩了一些数字。我还禁用了自动换行，因此文本始终保留在图像中。

.wrapper {
      display: flex
}

.left-wrapper {
    width: 35%;  
}

.right-wrapper {
    width: 65%;
}

.conclusion-block {
    background: url(https://i.imgur.com/NKTY6Du.png);
    background-size: 550px;
    background-repeat: no-repeat;
}

ul.conclusion-list {
    padding-bottom: 75px;
    padding-top: 40px;
    padding-left: 100px;
}

.conclusion-list li {
    font: 18px/33px Open Sans;
    font-weight: 600;
    letter-spacing: 0.18px;
    color: #333333;
    margin-bottom: 0;
    white-space: nowrap;
}

<div class="wrapper">

  <div class="left-wrapper"></div>

  <div class="right-wrapper">
    <div class="conclusion-block">
      <ul class="conclusion-list content-list">
         <li>Sincerely yours,/Sincerely,</li>
         <li>Best regards,/All the best,</li>
         <li>Regards,</li>
         <li>Thank you for your consideration,</li>
         <li>Respectfully,</li>
      </ul>
    </div>
  </div>

</div>