как отцентрировать абсолютное положение <img>в <div>, но сохранить оригинальное соотношение сторон

Question

У меня есть это изображение с этим 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)

Итак, как мне этого добиться?

Answer 1

.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));    
    });   
    });

<div class="containerImg"><img class="cutImg" src="images/sample1.jpg"/></div>
<div class="containerImg"><img class="cutImg" src="images/sample2.jpg"/></div>

Answer 2

На вашем месте я бы использовал 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 какпорт просмотра, и изображение с таким же соотношением и размером будет фоновым; если изображение больше, дополнительный размер будет «обрезан»:)

Answer 3

.img {
    margin: 0 auto;
    position: absolute;
    max-height: 420px; /* Same height as container's */
    height: expression(this.height > 420 ? "420px" : true;    
}

И если вы хотите проверить ширину, вы должны установить ширину контейнера на фиксированное значение ...

Счастливое кодирование ^^

Answer 4

Не уверен, что я понимаю, что вы имеете в виду, но вы не можете установить изображение в качестве фона:

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

Или если оно динамически встроено в атрибут style <div class="containerImg">