<div> 的大小应始终保持不变答案

【问题标题】：Size of <div> should stay always the same<div> 的大小应始终保持不变
【发布时间】：2018-09-07 14:17:59
【问题描述】：

所以我有这个代码来显示一张卡片（面板），它由一张带有下面链接的图片组成。现在 div 的高度随着每个图像的变化而变化，因为图像的大小不同。无论图像大小如何，我都希望 div 始终保持相同的高度。

可能这只是一个 css 更改。有什么想法吗？

<div class ="row" style="margin-top: 40px;">
  <h3 style="text-align: center; color:#000;">Top Walls near you</h3><br/>
  <% @walls.each do |wall| %>
  <div class ="col-md-4">
    <div class="panel panel-default">
    <div class ="panel-heading preview">
      <%= link_to wall do %>
      <%= image_tag wall.cover_photo(:medium) %>
      <% end %>

    </div>
    <div class="panel-body" style="box-shadow: 2px 27px 25px -19px rgba(176,176,176,1);">
      <%= link_to wall.address, wall %>
    </div>
  </div>
</div>
 <% end %>
</div>

【问题讨论】：

您能在此处发布您的 HTML 标记（以及其他 CSS，如果有的话）吗？这将有助于回答问题。
定义 div 的高度和宽度。大概宽度：100%
你的图片不仅尺寸不同，而且比例尺也不同。尝试将图像裁剪为与其他图像相同的比例（4:3、16:9），它们看起来会更均匀。

标签： javascript html css ruby-on-rails

【解决方案1】：

您好，只需为具有“width”属性的 div 元素设置一个默认值即可：

<div width = "1000px"></div>

或

css:

 div {width:1000px;}

您可以在默认大小的 div 中添加您正在使用的图像标签或 div 标签，并控制溢出属性的外观宽度。示例：

CSS：溢出：隐藏；

【讨论】：

【解决方案2】：

一种可能的解决方案是调整图像大小以适应 div 的高度。所以首先我们迭代图像（我不知道你的在哪里，preview 类？）然后我们像他的父母一样设置高度，这里是一个例子：

document.querySelectorAll(".images img").forEach(function(i){
i.height = i.parentElement.clientHeight;
})

.images{
  height: 100px; 
}

<div class="images">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/Dickweiler_Wegekreuz.jpg" />
</div>
<div class="images">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/4d/Echternach_mairie.jpg" />
</div>
<div class="images">

</div>

在这种情况下，我使用clientHeight（仅包括填充）但可能是offsetHeight（包括填充、滚动条和边框）

【讨论】：