通过使用 jQuery 动态设置 CSS 值使图像在 div 中居中答案

【问题标题】：Centering an image in a div by setting CSS values dynamically with jQuery通过使用 jQuery 动态设置 CSS 值使图像在 div 中居中
【发布时间】：2012-11-13 06:51:27
【问题描述】：

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

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

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

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

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

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

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

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

【问题讨论】：

我认为这可能是您的解决方案：stackoverflow.com/questions/4958385/…

标签： jquery html css

【解决方案1】：

正如this post中所建议的那样

我更改了您的 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

【讨论】：

是的！这完美地工作。与 JS 相比，更少的 CSS 处理所有这些是更好的做法吗？
我不是专家，但至少从不再需要在客户端浏览器中激活 javascript 的角度来看应该更好。如果是这种情况，他们会看到图像的未居中版本。

【解决方案2】：

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

【讨论】：

我试过here。它似乎没有用。我错过了什么吗？
该图像比包含它的 div 大，因此使用 margin: auto 技术无法居中。
像我的 jQuery 技术这样的方法吗？
是的，您正在尝试“溢出”居中，因此在这种情况下您需要使用一些 JavaScript。

【解决方案3】：

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

$(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/

【讨论】：

【解决方案4】：

jsFiddle

$(window).load(function(){

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

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

});

【讨论】：