如何将所有图像高度设置为相同但保持响应能力答案

【问题标题】：How to set all images height the same but keep responsiveness如何将所有图像高度设置为相同但保持响应能力
【发布时间】：2018-11-28 14:19:42
【问题描述】：

我有几个不同的图像，它们都具有不同的高度/宽度。我希望它们都具有相同的高度并保持它们的纵横比，所以我认为 css 宽度应该等于 auto。如何实现我的所有图像都具有相同的高度但保持响应能力？

我编写了以下包含图像的代码：

<div class="container container-margin">
        <div class="columns">
          <div class="column is-one-third">
            <div class="card">
                <div class="card-image">
                  <figure class="image">
                    <img class="bw-filter" src="/images/battleport.png"/>                              
                  </figure>
                </div>
                <div class="card-content remove-padding-left">    
                  <div class="content">
                    <h6 class="">Battleport</h6>
                    <p><i>Study</i></p>
                    <br>
                  </div>
                </div>
              </div>
          </div>
          <div class="column is-one-third">
            <div class="card">
              <div class="card-image">
                <figure class="image">
                  <img class="bw-filter" src="/images/crmfabriek.png"/>                              
                </figure>
              </div>
              <div class="card-content remove-padding-left">    
                <div class="content">
                  <h6 class="">CRM Fabriek</h6>
                  <p><i>Business</i></p>
                  <br>
                </div>
              </div>
            </div>
          </div>
          <div class="column is-one-thrid">

          </div>
        </div>

除此之外，我还查看了以下主题

不幸的是，主题中的解决方案不适用于我的代码。谁能帮帮我？

【问题讨论】：

我担心这样的事情你可能不得不使用js。看这个插件：brm.io/jquery-match-height 演示：brm.io/jquery-match-height-demo

标签： html css

【解决方案1】：

不确定这是否是您正在寻找的，但可能是解决方法。

div{
  width: 100%;
  text-align: center;
}

img{
  max-width:100%;
  max-height: 300px;
}

<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="">
</div>

【讨论】：

【解决方案2】：

我认为最好的选择是将这些图像用作背景图像，然后将背景大小设置为“包含”或“覆盖”。这样您就可以根据媒体查询将容器的宽度/高度设置为适当的大小。

【讨论】：