1

I have several different images all with a different height/width. I want them all to have the same height and keep their aspect ratio so I figured in the css width should be equal to auto. How can I achieve that all my images have the same height but keep responsiveness?

I wrote the following code containing the images:

<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>

Besides that I've looked at the following topics

Unfortenately the solutions in the topics won't work for my code. Could anyone help me out?

Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
Sander Bakker
  • 611
  • 2
  • 12
  • 32
  • I am afraid that for something like this you may have to use js. See this plugin: http://brm.io/jquery-match-height/ Demo: http://brm.io/jquery-match-height-demo/ – dmgig Jun 19 '18 at 15:06

2 Answers2

0

Not sure if this is what you are looking for, but might be the fix.

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>
Thomas Scheffer
  • 524
  • 4
  • 7
0

I think the best option would be to use these images as background images and then set the background-size to either "contain" or "cover". This way you can set the container width/height to the appropriate size based on the media query.

TexasT
  • 235
  • 1
  • 6
  • 17