Html 如何居中绝对定位<；img>；在<；部门>；但保持原来的纵横比

我有这个图像，带有这个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中唯一的东西

因此，图像应该使用所有容器尺寸和裁剪de图像，但保持原始比例，图像为1600x500（3,2:1）

---

那么，我如何才能做到这一点呢？

我不确定我是否理解你的意思，但你不能将图像设置为背景：

.containerImg {
    height: 420px;
    margin-top: 0;
    position: relative;
    width: 100%;
    background-image: url("img/section_es_2442.jpg");
    background-position: center;
}

或者如果它是在

如果要检查宽度，必须将容器的宽度设置为固定值

---

快乐编码^ ^

如果我是你，我会使用背景图像而不是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的视图端口，具有相同比例和大小的图像将成为背景，如果图像更大，则额外的大小将“像”裁剪：）

如果没有其他解决方案，我打算这么做，但现在我做不到。。。感谢你的回复谢谢你的重播，我不知道这个表达在做什么，正在检查高度是否大于420，如果是这样，保持在420？？

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

.containerImg {
     width: 120px;
     height: 120px;
     position: relative;
     overflow: hidden;
     }
     .cutImg {
     position: absolute;
     max-width: 120px;
     width: expression(this.width > 120 ? "120px" : true);
     max-height: 120px;
     height: expression(this.height > 120 ? "120px" : true);
     }

jQuery(window).load(function(){
    jQuery.each($(".cutImg"), function() {
    $(this).css("margin-left",(($(".containerImg").width()-$(this).width())/2));
    $(this).css("margin-top",(($(".containerImg").height()-$(this).height())/2));    
    });   
    });