Keep image aspect radio inside a column div while keeping same column height

Question

I have two bootstrap columns next to each other that need to keep the same height all the time except for mobile devices where they take 100% of the screen. My problem is that one of the columns have an image, i need to keep the image ratio while at the same time keeping its columns container height the same as the column next to it. There's a point where the screen size make the column height bigger and what i need to do is increase the image height but without losing its radio. Here's some screen shots:

Two columns that need to have the same height

Here's where i need that the columns keep the same height while the image on the left column increase its height but keep its aspect ratio so i don't have that amount of white vertical space:

<div class="comunicados row">
<div class=
"articles col-lg-6 col-md-6 col-sm-12 col-xs-12 article-content-match-height" style=
"height: 345px;">
  <a class="ultimos_comunicados" href=
  "/sites/TestIntranet/AnticipaComunica/Paginas/NewsDetail/Correo-Malware.aspx"></a>

  <div class="article-box-horizontal fixed col-lg-12 col-md-12 col-xs-12">
    <span class="tag" data-img="37">correo malware</span>

    <div class="crop"><img alt="" src=
    "/sites/TestIntranet/test/PublishingImages/phishing%20comunicado%202.jpg" style=
    "BORDER: 0px solid;" /></div>

    <div class="Force">
      <span class="date">25/05/2017 | Seguridad de la Informaci&oacute;n</span>

      <p>Correo Malware</p>
    </div>
  </div>
</div>

<div class=
"articles col-lg-6 col-md-6 col-sm-12 col-xs-12 article-content-match-height" style=
"height: 345px;">
  <a class="ultimos_comunicados" href=
  "/sites/TestIntranet/AnticipaComunica/Paginas/Comunicadosdelarea/Test-Nueva-Carpeta-GA.aspx">
  </a>

  <div class=
  "article-box-match-height article-box-horizontal picture col-lg-12 col-md-12 col-xs-12"
  style="height: 105px;">
    <span class="tag" style="background: orange;" data-img="47">Gestores de
    Area</span><img alt="" src=
    "/sites/TestIntranet/AnticipaComunica/PublishingImages/sharepoint.jpg" width=
    "590" style="BORDER: 0px solid;" />

    <div class="article-header marginTop20">
      <span class="date">25/05/2017 | CEO</span>

      <p class="">Test Nueva Carpeta GA1</p>
    </div>
  </div><a class="ultimos_comunicados" href=
  "/sites/TestIntranet/AnticipaComunica/Paginas/Comunicadosdelarea/Prueba-imagen.aspx"></a>

  <div class=
  "article-box-match-height article-box-horizontal picture col-lg-12 col-md-12 col-xs-12"
  style="height: 105px;">
    <span class="tag" style="background: orange;" data-img=
    "52">PRUEBA</span><img alt="" src=
    "/sites/TestIntranet/test/PublishingImages/galaxia.jpg" style=
    "BORDER: 0px solid;" />

    <div class="article-header marginTop20">
      <span class="date">16/05/2017 | Comercial y Marketing</span>

      <p class="">Prueba imagen grande</p>
    </div>
  </div><a class="ultimos_comunicados" href=
  "/sites/TestIntranet/AnticipaComunica/Paginas/NewsDetail/Test2Comunicado.aspx"></a>

  <div class=
  "article-box-match-height article-box-horizontal picture col-lg-12 col-md-12 col-xs-12"
  style="height: 105px;">
    <img alt="" src=
    "/sites/TestIntranet/AnticipaComunica/PublishingImages/formaci%C3%B3n%20e-learning%201.jpg"
    style="BORDER: 0px solid;" />

    <div class="article-header marginTop20">
      <span class="date">04/05/2017 |</span>

      <p class="">Test2Comunicado</p>
    </div>
  </div>
</div>

.article-box-horizontal.fixed {
   height: 97% !important;
}

    .crop {
    max-height: 257px;
    overflow:hidden;
    margin-bottom: 1em;
} 

.article-box-horizontal.fixed {
   height: 97%
}

You will find a plethora of examples here: https://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height — VladNeacsu, May 29 '17 at 08:27
thanks @VlaNeacsu but all of those examples just focus on the same height column problem which is just one of my issues, i guess the thing that is more complicated to solve is keeping the image ratio while having same height columns. — Lowtrux, May 29 '17 at 08:37
You're asking the question wrongly, the image Does! keep it's aspect ratio, because you never change the width, what you want is really for the image to increase it's height and cropping the left and right margins. — VladNeacsu, May 29 '17 at 11:21
Yeah, you're totally right @VladNeacsu. I guess it0s hard to explain (at least for me) because basically the image have to -yeah- increase it's height but at the same time keep its ratio within two premises: don't broke the div width and keep the column container with the same height as the column next to it. — Lowtrux, May 29 '17 at 12:25

Rounin · Answer 1 · 2017-05-29T10:08:26.397

Instead of including the image in your markup as an <img> element:

<div class="crop">
    <img alt="" src="/sites/TestIntranet/test/PublishingImages/phishing%20comunicado%202.jpg" />
</div>

You can give .crop a background-image style declaration, which will enable you to take advantage of:

background-size: cover;

Mozilla Developer Network (MDN) explains the keyword cover:

A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

Example:

HTML

<div class="crop">
</div>

CSS

.crop {

    [... MORE STYLES...]

    background-image: url('/sites/TestIntranet/test/PublishingImages/phishing%20comunicado%202.jpg');
    background-size: cover;
}

Keep image aspect radio inside a column div while keeping same column height

1 Answers1

Example: