Html 确保div大小均匀，文本缩小以适合，而不需要隐藏溢出？

这是一个简单的二手车销售平台，供不需要太多互动的经销商使用，只是以类似于印刷杂志的视觉方式列出车辆和价格（单击运行代码片段并查看整个页面以查看其当前外观）：

正文{
字体系列：Helvetica，无衬线；
}
页眉、页脚{
背景色：#7690AC；
颜色：#FFFFFF；
填充：20px；
垫底：20px；
}
.内容{
填充：10px；
边缘底部：10px；
左边距：20px；
}
.电网{
边缘底部：20px；
}
.grid{
显示：网格；
网格模板列：重复（自动填充，最小值（300px，1fr））；
栅隙：20px；
对齐项目：居中；
}
.grid>文章{
边框：1px实心#333；
盒影：2PX2PX6PX0PXRGBA（0,0,0,0.3）；
最小高度：25em；
顶部：-10px；
}
.grid>文章img{
最大宽度：100%；
边缘底部：12px；
}
.文本{
字号：1em；
变换：scaleX（1.2）scaleY（1）；
左边距：25px；
宽度：270px；
}
.文本{
填充：0 10px 20px；
}
.text>按钮{
背景：灰色；
边界：0；
颜色：白色；
填充：10px；
宽度：100%；
}
h3.价格{
文本对齐：居中；
}
.卡片{
网格模板列：重复（2，1fr）；
边界塌陷：塌陷；
最大宽度：1200px；
保证金：0自动；
显示：网格；
网格间距：1rem；
}
.卡片{
背景色：淡蓝色；
颜色：白色；
填充：1rem；
身高：4rem；
}
p、 地址，电话号码{
字号：18px；
字号：900；
线高：12px；
}
&电话；：以前{
字体大小：14px；
}

你的房车
彭德顿阿克斯利路XX1 1XA
01634 00000
欢迎来到你的汽车屋

2020 70 ELDDIS AUTOQUEST 194 2.2 HDi 140轻薄房车标致BOXER底盘
4个卧铺，末端卫生间，白色，100升淡水，70升废水，三环滚刀，OG炊具，155升冰箱，600英里，几乎和新的一样，44895英镑

图像仅供说明之用
2014 64 DETHLEFFS i6810 ESPRIT 2.3 MULTIJET 130 A级菲亚特杜卡托露营车
4个泊位，4个带安全带的A级房车，采用Diamodn白色饰面，固定单人床布局，3个环形炊具，满载规格，28000英里，62115英镑

2009 59 BURSTNER AVIANO i725 3.0 MULTIJET 180菲亚特TD
4个泊位，黄金，岛床布局，三环滚刀，150升冰箱，长7.45米，宽2.30米，44995英镑

2009 58 BURSTNER NEXXO系列A645 2.2 TDCi
6个卧铺，6个带安全带的座位，末端卧室，蓝色，布局-驾驶室上方双人床，中心双人床，后双层床，2名新业主，良好的服务历史，驾驶室空调，加气可再填充液化石油气系统，Truma吹气组合锅炉，HPI Clear，车顶栏杆，大型车库-如果不使用下铺，遮阳篷，MOT 17/12/2021，书中有11张服务印章，最后一次潮湿检查日期为01/21，GVW 3500kg，长6.56m，宽2.30m，高3.0m，仅20747英里，登记日期为2009年1月30日，MoT应于10月21日到期。本周到期。这是一个很好的例子，现在必须看到，你不会找到更好的
35000英镑

内容

给定的代码在网格中排列文章，网格可根据视口宽度进行调整，但需要以下内容：

每件物品的高度应该相同

每个图像的高度应该相同

文本应调整字体大小，使其始终适合文章大小

依次考虑每项要求：

把文章的高度定在某个地方。这取决于你认为什么是合理的，记住一辆面包车可能需要的最大文本量——以确保其文本仍然可读。下面的代码片段将其设置为30em（基于问题中最小高度为25em的代码）

虽然我们希望每个img的高度相同，比如说文章高度的%，但我们需要确保整个img始终可见，没有扭曲或裁剪。此代码段更改HTML，使img元素成为具有固定尺寸的div，图像用作背景，水平和垂直居中，并包含大小。（备选方案见下文）

我认为改变字体大小需要Javascript。此代码段查看文本div的高度，如果文本div太高，则更改字体大小，直到合适为止。您可能希望对其设置不同的限制，以使其始终可读，即使这意味着用户偶尔需要滚动

const articles=document.querySelectorAll（'.grid>article'）；
articles.forEach（article=>{
const articleH=article.offsetHeight；
设h=article.querySelector（'.text'）.offsetHeight；
var fontSize=0.9；
而（h>articleH/2）{//NOTE假设img是50%的alter，如果它是其他东西
article.querySelector（'.text'）.style.fontSize=fontSize+'em'；
h=article.querySelector（'.text'）.offsetHeight；
如果（字体大小）文章{
边框：1px实心#333；
盒影：2PX2PX6PX0PXRGBA（0,0,0,0.3）；
/*最小高度：25em*/
高度：30em；/*已添加*/
顶部：-10px；
}
.grid>article.img{
宽度：100%；
身高：50%；
背景尺寸：包含；
背景位置：中心；
背景重复：不重复不重复；
边缘底部：12px；
}
.文本{
字号：1em；
/*变换：scaleX（1.2）scaleY（1）*/
左边距：25px；
宽度：270px；
}
.文本{
填充：0 10px 20px；
}
.text>按钮{
背景：灰色；
边界：0；
颜色：白色；
填充：10px；
宽度：100%；
}
h3.价格{
文本对齐：居中；
}
.卡片{
网格模板列：重复（2，1fr）；
边界塌陷：塌陷；
最大宽度：1200px；
保证金：0自动；
显示：网格；
网格间距：1rem；
}
.卡片{
巴克
    Try this - 
1. Remove transform property form .text class and 
2. Remove align-items from .grid class. 

    .text {
        font-size: 1em;
        /* transform: scaleX(1.2) scaleY(1); */ // Comment it. 
        margin-left: 25px;
        width: 270px;
    }
    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        grid-gap: 20px;
        /* align-items: center; */ //Comment it. 
    }