Размер <div>должен оставаться всегда одинаковым

Question

, поэтому у меня есть этот код для отображения карты (панели), которая состоит из рисунка со ссылкой ниже. Прямо сейчас высота 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>

Answer 1

Одним из возможных решений является изменение размеров изображений, чтобы они соответствовали высоте 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 (включает заполнение, полосу прокрутки и границы)

Answer 2

Здравствуйте. Просто установите значение по умолчанию для элемента div со свойством width:

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

или

CSS:

 div {width:1000px;}

Вы можете добавить тег изображения или тег div, который вы используете, внутри элемента div с размером по умолчанию и управлять шириной внешнего вида для свойства overflow. Пример:

CSS: переполнение: скрыто;