Question

我想以任何屏幕分辨率将文本始终放在白色块内吗？

因此，我不想为每100像素添加一个蚂蚁媒体查询。

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>

Answer 2

尝试transform: scale(1);

.wrapper { display: flex }

.left-wrapper { width: 35%; }

.right-wrapper { width: 65%; }

.conclusion-block { width: 550px; transform: scale(1); 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; 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>

Answer 3

如果您想只在图像上保留背景，则可以始终尝试使用vh大小使文本变小/变宽，并用％更改填充以使其跟随。

这是一个例子：

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: 12%;
 padding-left: 20%;
}
.conclusion-list li {
 line-height: auto;
 font-family: Open Sans;
 font-size: 2.1vw;
 font-weight: 600;
 letter-spacing: 0.18px;
 color: #333333;
 margin-bottom: 0;
}

您可以看一下： https://jsfiddle.net/jeymchugh/x82aqwou/

或者您可以尝试将背景分成不同的部分，以使其保持适当状态，这将是一个更好的解决方案。

创建自适应背景图像

3 个答案: