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

【问题标题】：Text images adapt with CSS transform responsive design within grid (remove zoom)文本图像适应网格内的 CSS 转换响应式设计（删除缩放）
【发布时间】：2021-03-19 20:28:54
【问题描述】：

我有使用 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

【问题讨论】：

标签： html css flexbox responsive css-transforms

【解决方案1】：

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

【讨论】：