html - 如何将绝对位置的<image>在<div>中居中，但保持原始长宽比

我有这个图像，这个CSS：

.containerImg {
    height: 420px;
    margin-top: 0;
    position: relative;
    width: 100%;
}

.img {
    margin: 0 auto;
    position: absolute;          /*unfortunately i can’t remove the position:absolute*/
}

和标记：

<div class="containerImg">
<img class="img" alt="" src="img//section_es_2442.jpg">
<div class="info">
        …
          </div>
<div class="clear"></div>
</div>

我将其发布，因此您可以看到img不是.container中唯一的东西

因此，行为是图像应使用所有.container尺寸和裁剪图像，但保持原始比例，图像为1600x500（3,2：1）

那么，我该如何实现呢？

最佳答案

如果我是你，我将使用此代码使用background-image而不是img：

.containerImg {
    height: 420px;
    margin-top: 0;
    position: relative;
    width: 100%;
}

.img {
    margin: 0;
    /*position: absolute;    I'll remove this */
    height: 420px;
    width: 100%; /*or use pixels*/
    background: transparent url('') no-repeat center top;
    overflow: hidden; /* not sure about you really need this */
}

与：

<div class="containerImg">
  <div class="img" style="background-image: url('img/section_es_2442.jpg')"></div>
  <div class="info">
        …
  </div>
  <div class="clear"></div>
</div>

想法是您有一个像div这样的视口，并且具有相同比率和大小的图像将成为背景，如果图像较大，则其他尺寸将“像”裁剪：)