实施例

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：

与contains相反的关键字。尽可能大地缩放图像并保持图像宽高比（图像不会得到压扁）。图像＆＃34;覆盖＆＃34;整个宽度或高度容器。当图像和容器具有不同的尺寸时，图像被剪切为左/右或上/下。

实施例

<强> HTML

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

<强> CSS

.crop {

    [... MORE STYLES...]

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

将图像方面无线电保持在列div内，同时保持相同的列高度

1 个答案:

实施例