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

问题

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.

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>

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_O4eueNbrG8JtQjul7cQ#Screen_Recording_2020-12-08_at_14.04

回答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.

来源：https://stackoverflow.com/questions/65200260/text-images-adapt-with-css-transform-responsive-design-within-grid-remove-zoom

标签

html

css

flexbox

responsive

css-transforms