保持列 div 内的图像纵横比，同时保持相同的列高

Question

我有两个彼此相邻的引导列，除了占据 100% 屏幕的移动设备外，它们需要始终保持相同的高度。我的问题是其中一列有图像，我需要保持图像比例，同时保持其列容器高度与其旁边的列相同。有一点屏幕尺寸会使列高变大，我需要做的是增加图像高度但不会丢失它的收音机。以下是一些屏幕截图：

需要具有相同高度的两列

这里我需要列保持相同的高度，而左列上的图像增加其高度但保持其纵横比，因此我没有那么多的白色垂直空间：

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

Answer 1

而不是将图像作为<img> 元素包含在您的标记中：

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

您可以给.crop 一个background-image 样式声明，这将使您能够利用：

background-size: cover;

Mozilla 开发者网络 (MDN) 解释了关键字cover：

与包含相反的关键字。尽可能大地缩放图像并保持图像纵横比（图像没有得到 压扁）。图像“覆盖”了整个宽度或高度 容器。当图像和容器的尺寸不同时， 图像被剪裁为左/右或上/下。

示例：

HTML

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

CSS

.crop {

    [... MORE STYLES...]

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