如何防止图像更改元素的高度？ HTML和CSS

Question

我有一个网格，向其中添加了网格项，然后使用thumbnail类，为缩略图类（类）标签提供了尺寸。问题是，当我将图像添加到<img>标签时，它会更改高度尺寸。我不希望这种情况发生，相反，我希望保持我给它的尺寸。

因此，我将以下内容框添加到网格中：

$('.content').append('<div class="grid-item"> <img class="thumbnail" src='+thumbnail+'><div class="details"><img class="profileImg" src='+profPic+'><span class="portalTitle">'+caption+'</span></div></div>');

然后我有以下CSS：

    .content {
      display: grid;
      grid-template-columns: repeat( auto-fit, minmax(400px, 1fr) );
      /* grid-template-columns:auto auto auto; */
      /* 10fr, 10fr, 10fr, 10fr; */
      /* auto auto auto; */
      /* background-color: #2196F3; */
      padding: 5px;
      margin-top: 25px;
      margin-right: 25px;
      margin-left: 250px;
      margin-bottom: 170px;
    }

    .grid-item {
      /* background-color: rgba(255, 255, 255, 0.8); */
      /* border: 1px solid grey; */
      padding: 0px;


      /* max-width: 440px;
      min-width: 439px; */


      /* 150px */
      /* font-size: 30px; */
      /* text-align: center; */
    }
    .thumbnail {
      /* background-color: black; */
      margin-right: 5px;
      width: 95%;
      /* height: 240px; */
      height: 70%;
      border-radius: 9px;
      cursor: pointer;
    }
    /* object-fit: cover; */

    .details {
      display: inline-flex;
      /* text-align: center; */
      /* display:block; */
      /* display:table-cell;
      vertical-align:middle; */

      /* background-color: grey; */
      margin-right: 5px;
      width: 95%;
      height: 80px;
    }
    .portalTitle {
      margin-top: 25px;
      margin-left: 10px;
      /* margin: auto; */
      /* line-height: 70px; */
      font: Arial;
      font-family: sans-serif;
      font-size: 16px;
      font-weight:500;
    }
    .profileImg {
      cursor: pointer;
      width: 50px;
      height: 50px;
      border-radius: 25px;
      margin-top: 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>

Update：从我收集的数据来看，似乎高度发生了变化，但宽度保持不变。我该如何解决？问题是，如果我设置一个特定的高度而不是百分比，那么divs将怪异地拉伸，而不是正确地动态缩放。

显示该问题的图像（您可以看到div的高度不同，就像我想要的YouTube高度和宽度一致时一样

Answer 1

我相信您希望网格内容对称，但是这里的照片尺寸可能可变，或者txt内容可能有所不同。

对于图像

.profileImg{

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

 }

为缩略图应用类似的CSS

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

个人，我建议您改用bootstrap row-col。这也会使您的网站响应速度更快。