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

Question

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

需要有相同高度的两列

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

<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 Developer Network (MDN) 解释关键字 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.

示例:

HTML

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

CSS

.crop {

    [... MORE STYLES...]

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