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

如果我是你，我会使用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 */
}

with：

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


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

不确定我是否明白你的意思，但你不能把图像设置为背景：

.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">属性中动态构建

Answer 4

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

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

快乐编码^^

如何将<div>中的绝对定位<img/>居中，但保持原始宽高比</div>

4 个答案: