Question

以下是我网站上针对居中图片的一段常规代码：

<img width="600" alt="Image" src="img-src.jpg" style="width: 600px;"
 class="center" />

我使用带有中心类的内联样式（中心的css为margin:0 auto;）来将我的图像置于页面中心。我不能为具有中心类的图像设置标准宽度，因为图像的宽度不同。

我知道jQuery有一个CSS属性，这让我想到我是否可以使用jQuery从图像属性中读取图像宽度，并自动将width: *image-size pulled from img properties*px;插入到具有中心类的任何图像中，从而消除了需要我手动设置每个图像的图像宽度。

请提供示例，因为我自己也不能流利地写这篇文章。

Answer 1

如何使用text-align : center

为图像添加容器

<div style="text-align : center;">
    <img src="..." />
</div>

以下是演示：http://jsfiddle.net/YfFht/

CSS解决方案对性能有利。

Answer 2

HTML

<div class="center">
  <img alt="Image" src="img-src.jpg" style="width: 600px;" />
</div>

CSS

.center {
  width: 100%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  position: absolute; /*or fixed*/
  left: 50%;
  top: 50%;
  text-align: center;
}

Answer 3

使用load来检测何时下载图像。在每个匿名函数中获取宽度并将其应用为css属性。

$('img').load( function() {
   $(this).css('width', $(this).width());
});

Answer 4

从img元素中删除内联样式，然后在窗口加载事件上尝试此代码，这将确保加载页面上的所有资源。

$(window).load(function(){

    //You can grab the img dimensions as below.
    var width = $('imgSelector').width();
    var height = $('imgSelector').height();

    //Use `css` method to set the styles on the element.
    $('imgSelector').css({
        width: width,
        height: height
    });

    //E.g - this will set the width and height of all the images on the page
    $('img').each(function(){
        $(this).css({
             width: width,
             height: height
        });
    });

});

Answer 5

将图像包装在父容器中，例如div，其宽度和高度设置为允许的最大值。然后使用以下jQuery插件将它们放在div中：

http://boxlight.github.com/bl-jquery-image-center/

Answer 6

要做你想要的事情，你只需要这样做：

$("img.center").load(function(){
   var currentImage = $(this);
   currentImage.css("width",currentImage.width()+"px");
});

Answer 7

此jQuery代码段为所有text-align图片将父级center CSS属性设置为.center，我认为无需设置宽度即可完成相同的操作：

$('img.center').parent().css('text-align','center');

DEMO

Answer 8

你会看$("img").width()这将使用整数格式给你宽度（如果宽度是“width: 100px;”，那么这将是“100”）。但为了使其工作，每个图像都必须设置width=""属性，否则您将出错并且没有返回任何值。

要检查的两个链接是：

http://api.jquery.com/width/

http://api.jquery.com/outerWidth/

使用jQuery CSS属性来居中图像

8 个答案: