0

在将图像缩放到 250px 的高度后，我试图根据图像的宽度将图像居中。

例如，如果我有一个尺寸为 625x450 的图像，并且在我的 CSS 文件中，将图像的高度设置为 250 像素，那么宽度将自动缩放为 347.22 像素。我希望能够检测到缩放后的宽度，然后设置 (width - height)/2 的左边距以使图像居中。

这个例子的硬编码形式的 CSS 看起来像这样（整个小提琴都在这里）：

.gallery {
    width: 250px;
    overflow: hidden;
    position: relative;
}

.gallery img {
    height: 250px;
    width: auto;
    margin-left: -48px;
}

但我希望能够使用其他维度的图像即时执行此操作。我试图通过删除硬编码 CSS 的左边距线并添加一些 jQuery 来做到这一点（整个小提琴在这里）：

$(document).ready(function(){
    oldWidth = $('.gallery img').width();
    newMarg = (oldWidth - 250)/2);       
    $('.gallery img').css("margin-left", newMarg);
}

不过，我在这种方法上没有取得任何成功。它必须与我搞砸的jQuery有关。我对我在这里尝试做的一切都很陌生，我觉得我可能会错过一些简单的东西。

4

4 回答 4

1

正如这篇文章中所建议的

我更改了您的 jsFiddle 以适应该帖子中的概念：

jsFiddle

<div class="outer">
   <div class="inner">
       <img src="" />
   </div>
</div>

和

.outer {
  width: 250px; overflow: hidden;
}
.inner {
  float: left; position: relative; left: 50%;
}
.inner img {
  height: 250px; display: block; position: relative; left: -50%;
}

这个解决方案的优点是它不依赖于 javascript

于 2012-11-25T19:03:03.833 回答
0

如果将图片设置为display:block，可以使用margin: 0 auto;text-align:center;

于 2012-11-25T18:19:58.530 回答
0

除了一些放错位置的括号外，你的减法倒退了：

$(document).ready(function() {
    oldWidth = $('.gallery img').width();
    newMarg = (250 - oldWidth) / 2;
    $('.gallery img').css("margin-left", newMarg);
});​

http://jsfiddle.net/99PMd/10/

但是请注意，如果其中有多个.gallery或img内部，则该变量oldWidth将仅等于在 DOM 中找到的第一个此类图像。如果您有多个此类图像或多个画廊，则需要使用循环重构代码：

$(document).ready(function() {
    $('.gallery img').each(function() {
        oldWidth = $(this).width();
        newMarg = (250 - oldWidth) / 2;
        $(this).css("margin-left", newMarg);
    });
});​

http://jsfiddle.net/99PMd/11/

现在就个人而言，我发现溢出这样的图像没有吸引力，所以我只是调整图像的大小以适应它的容器。这可以用纯 CSS 来完成：

.gallery img {
    height: auto;
    max-width:100%;
}​

http://jsfiddle.net/99PMd/12/

于 2012-11-25T18:45:12.850 回答
0

jsFiddle

$(window).load(function(){

   var galW = 250;
   var imgW = $('.gallery img').width();

   if(imgW>galW){
       $('.gallery img').css({marginLeft: (galW-imgW)/2 })   ;
   }

});
于 2012-11-25T18:53:18.267 回答