文本图像适应 CSS 变换网格内的响应式设计（删除缩放）

Question

我有日期是用 PHP 计算出来的，并以图像的形式输出，比如 2 月 26 日、3 月 3 日等。由于日期的字符长度明显不同，我希望图像匹配具体字体大小。

我遇到的问题是让这一切都适合一个响应式网格，因为图像不会随着网格的变换而缩放。如果我在某个时候为网格设置了最大宽度，大图像会赶上小图像，它们都会变成相同的宽度，这会使字体大小看起来不对。

有一个全局 img max-width:100% 集，我已通过还原从 phpimages 中删除了它。顺便说一句，我必须在纯 CSS 中执行此操作，因为它是 eBay 列表，所以不允许使用 JS。我希望图像能够响应地缩小，但我希望它们保持实际的字体大小，所以无论单词有多长，它们在彼此旁边看起来都是正确的。

img {max-width: 100%}

.rounded-box {
  display: block;
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #151516;
  border-radius: 30px;
  margin: 35px auto 35px auto;
  max-width: 1250px
}

.flex-container {
  display: flex;
  max-width: 1250px;
  margin: 0 auto;
}

.flex-child {
  flex: 1;
}

.box-text {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  font-size: 16px;
  color: #A1A1A6;
  line-height: 26px;
  font-weight: 300;
}

.cpu {
  background: linear-gradient(to right top, #071931 0%, #33274f 50%, #661e43 100%);
}

.cpu h3 {
  text-align: left;
  font-size: 45px;
  line-height: normal;
  color: white;
  margin: 0 0 0 -5px;
  letter-spacing: -.028em;
}

.cpu h2 {
  text-align: left;
  font-size: 30px;
  line-height: normal;
  color: white;
  padding-bottom: 10px;
  letter-spacing: -.028em;
}

.flex-box-content {
  padding: 35px 3% 35px 4%
}

.phpimage2 {
 position: relative; zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-origin: left center; display: block; margin:0 auto 0 auto
}

img.phpimage2 {
  max-width: revert !important
}

<div class="flex-container">
  <div class="rounded-box flex-child box-text cpu content-inner flex-box-content">
    <div class="box1-header"><span id="OrderTitle"></span></div>
    <div class="box2-content pad">If ordered today we estimate delivery to be between</div>
    <div class="phpbox">
      <img class="phpimage2" src="https://deecies.com/js/deliverym1c.php?colour=white&amp;mobile=p1&amp;type=Base" alt="Delivery Date">
      <div class="box2-content">and the</div>
      <img class="phpimage2" src="https://deecies.com/js/deliverym1c.php?colour=white&amp;mobile=p2&amp;type=Base" alt="Delivery Date">
    </div>
  </div>
</div>

这是我设法得到的最接近的结果，在 Firefox 上还差得远。

正如您从视频中看到的那样，当我调整框大小时，较长的图像首先被调整大小，所以我最终得到的文本大小不正确 - 我想要的是较短的图像被调整为相同的大小时间为较长的图像，因此字体大小始终保持同步。

https://www.icloud.com/iclouddrive/02lrF_O4eueNbrG8JtQjul7cQ#Screen_Recording_2020-12-08_at_14.04

Answer 1

不幸的是，似乎没有办法用纯 CSS 解决这个问题 - 在我的例子中，答案是生成具有相同高度和宽度的图像并将文本居中 - 现在所有图像同时调整大小，从而使生成的字体大小保持同步。在我的情况下，它确实意味着较小的最大文本，因为它需要创建一个文本框来容纳最大的结果（9 月 30 日），这也决定了 5 月 1 日的字体大小。

文本图像适应 CSS 变换网格内的响应式设计（删除缩放）

Text images adapt with CSS transform responsive design within grid (remove zoom)

html

css

flexbox

css-transforms

responsive