如何防止图像更改a的高度<；img>；元素？HTML和CSS

我有一个网格，我将网格项添加到其中，然后使用

缩略图

类为缩略图类（class）标记提供尺寸。问题是当我将图像添加到

'+caption+''）中时；

然后，我有以下css：

.content{
显示：网格；
网格模板列：重复（自动拟合，最小值（400px，1fr））；
/*网格模板列：自动*/
/*10fr，10fr，10fr，10fr*/
/*汽车*/
/*背景色：#2196F3*/
填充物：5px；
边缘顶部：25px；
右边距：25px；
左边距：250像素；
边缘底部：170px；
}
.表格项目{
/*背景色：rgba（255、255、255、0.8）*/
/*边框：1px纯灰*/
填充：0px；
/*最大宽度：440px；
最小宽度：439px*/
/*150像素*/
/*字体大小：30px*/
/*文本对齐：居中*/
}
.缩略图{
/*背景色：黑色*/
右边距：5px；
宽度：95%；
/*高度：240px*/
身高：70%；
边界半径：9px；
光标：指针；
}
/*对象匹配：覆盖*/
.详情{
显示：内联flex；
/*文本对齐：居中*/
/*显示：块*/
/*显示：表格单元格；
垂直对齐：中间对齐*/
/*背景颜色：灰色*/
右边距：5px；
宽度：95%；
高度：80px；
}
1.便携式{
边缘顶部：25px；
左边距：10px；
/*保证金：自动*/
/*线高：70px*/
字体：Arial；
字体系列：无衬线；
字体大小：16px；
字号：500；
}
.简介{
光标：指针；
宽度：50px；
高度：50px；
边界半径：25px；
边缘顶部：10px；
}

以下是一些html：

<div class="content">
  <!-- <div class="grid-item">
    <img class="thumbnail" src="images/testImg.png">
    <div class="details">
      <img class="profileImg" src="images/testImg.png">
      <span class="portalTitle"> Shanghai, China night sounds</span>
    </div>
  </div> -->
</div>

更新：根据我收集的信息，似乎高度有所变化，但宽度保持不变。我该如何解决这个问题？问题是，如果我设置了一个特定的高度而不是百分比，那么div将奇怪地拉伸，而不是正确地动态缩放

---

显示问题的图像（正如你所看到的，当我想要它时，div具有不同的高度，更像是具有一致高度和宽度的youtube）

我相信你希望网格内容对称，但这里的照片可能大小不同，或者txt内容可能不同

对于图像

.profileImg{

 min-width:5rem; 
 max-width:5rem;
 min-height:5rem; 
 max-height:5rem;

 }

为缩略图应用类似的css

对于文本，可以设置要键入的限制，并为其div设置最小高度和最小宽度

---

就我个人而言，我建议您改用引导行颜色。这也会使您的网站更具响应性。

您希望缩略图img为网格项目高度的70%，但不改变其h/w比率吗？在这种情况下，只需删除

width

属性即可？这会对你有帮助us@MrLister我已经添加了一个图像显示，但它被删除。。。重新添加。