文本图像在网格内采用CSS变换响应设计进行适应(删除缩放) [英] Text images adapt with CSS transform responsive design within grid (remove zoom)

问题描述

我有一些日期，这些日期是用PHP计算的，并且作为图像读取，例如2月26日，3月3日等.由于这些日期的字符长度明显不同，我希望这些图像与特定的字体大小匹配.

I have dates that are calculated with PHP and spat out as images that read things like 26th of February, 3rd of March etc. As the dates obviously different in character length I want the images to match a specific font size.

我遇到的问题是使所有这些都适合网格内的响应，因为图像不随变换而随网格缩放.如果我在某个位置设置网格的最大宽度，则较大的图像会赶上较小的图像，它们的宽度都将变为相同，这会使字体大小显得不明显.

The problem I have is making this all fit within a grid that is responsive as the images don't scale with the grid with transform. If I set a max width for the grid at some point the large image catches up with the smaller image, they both become the same width which makes the font sizes appear off.

有一个全局img max-width:100％设置，我已通过还原将其从phpimages中删除.我也必须在纯CSS中执行此操作，因为它是eBay列表，因此不允许JS.我希望图像可以按比例缩小，但我希望它们保持实际的字体大小，因此无论单词彼此看起来正确多长时间.

There is a global img max-width:100% set which I've removed from the phpimages with the revert. I have to do this in pure CSS as well by the way as it's an eBay listing so no JS allowed. I want the images to scale down responsively but I want them to remain the font size they actually so no matter how long the words are they look correct next to each other.

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上也遥不可及.

This is as close as i've managed to get it and it's no where near on Firefox.

从视频中您可以看到，当我调整框的大小时，较长的图像会先被调整大小，因此最终我得到的文字大小是不正确的-我想让较短的图像与图片较长，因此字体大小始终保持同步.

As you can see from the video when I resize the boxes the longer image gets resized first so I end up with the text sizes being incorrect - what i'd like is for the shorter image to get resized as the same time as the longer image so the font sizes always remain in sync.

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

推荐答案

不幸的是，似乎没有人用纯CSS来解决这个问题-在我的情况下，答案是生成具有相同高度和宽度的图像并在其中居中放置文本-现在所有图像同时调整大小，从而使生成的字体大小保持同步.在我的情况下，这确实意味着最大的文本较小，因为它需要创建一个文本框，该文本框可以适合最大的结果(9月30日)，该文本框也规定了5月1日的字体大小.

Unfortunately there doesn't appear to be away to hack around this with pure CSS - the answer in my case was to generate the images with the same height and width and centre the text within them - now all the images resize at the same time which keeps the resulting font size in sync. It does mean smaller maximum text in my case though as it requires creating a text box which can fit the largest result into it (30th September) which dictates how big the typeface can be for the 1st May as well.

这篇关于文本图像在网格内采用CSS变换响应设计进行适应(删除缩放)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！