javascript 使用 jQuery CSS 属性使图像居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9283776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery CSS Property to Center an Image
提问by L84
Here is a piece of normal code from my site for centered images:
这是我网站上用于居中图像的一段普通代码：
<img width="600" alt="Image" src="img-src.jpg" style="width: 600px;"
class="center" />
I am using inline styles with a class of center (the css for center is margin:0 auto;) to center my images on a page. I cannot set a standard width for images with the center class because the images vary in widths.
我正在使用带有 center 类的内联样式（center 的 css 是margin:0 auto;）将我的图像居中放置在页面上。我无法为具有中心类的图像设置标准宽度，因为图像的宽度不同。
I know jQuery has a CSS property and that got me to thinking if I can use jQuery to read the image width from the image properties and automatically insert width: *image-size pulled from img properties*px;to any image that has a class of center thus eliminating the need for me to manually set the image width for every image.
我知道 jQuery 有一个 CSS 属性，这让我开始思考是否可以使用 jQuery 从图像属性中读取图像宽度并自动插入width: *image-size pulled from img properties*px;到具有中心类的任何图像，从而消除我手动设置图像的需要每个图像的宽度。
Please provide examples as I not fluent in JS enough to write this myself.
请提供示例，因为我对 JS 不够流利，无法自己编写。
回答by Jasper
What about giving your images a container with text-align : center:
给你的图像一个容器怎么样text-align : center：
<div style="text-align : center;">
<img src="..." />
</div>
Here's a demo: http://jsfiddle.net/YfFht/
这是一个演示：http: //jsfiddle.net/YfFht/
A CSS solution will be good for performance.
CSS 解决方案将有利于性能。
回答by krlzlx
HTML
HTML
<div class="center">
<img alt="Image" src="img-src.jpg" style="width: 600px;" />
</div>
CSS
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;
}
回答by JamieL
Wrap the image in a parent container such as a div which has the width and height set to the maximum you would allow. Then use the following jQuery plugin to center them inside the div:
将图像包装在父容器中，例如将宽度和高度设置为您允许的最大值的 div。然后使用以下 jQuery 插件将它们居中放置在 div 中：
回答by mrtsherman
Use load to detect when image is downloaded. In anonymous function for each one get the width and apply it as a css property.
使用 load 来检测图像何时被下载。在每个匿名函数中，获取宽度并将其作为 css 属性应用。
$('img').load( function() {
$(this).css('width', $(this).width());
});
回答by ShankarSangoli
Remove inline styles from the imgelements and then try this code on window load event which will ensure that all the resources on the page are loaded.
从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
});
});
});
回答by Jim Jeffers
To do what you are asking you only need to do this:
要执行您所要求的操作，您只需执行以下操作：
$("img.center").load(function(){
var currentImage = $(this);
currentImage.css("width",currentImage.width()+"px");
});
回答by paislee
This jQuery snippet sets the parent's text-alignCSS property to centerfor all .centerimages, which I think will accomplish the same without setting widths:
这个 jQuery 片段为所有图像设置了父级的text-alignCSS 属性，我认为这将在不设置宽度的情况下完成相同的操作：center.center
$('img.center').parent().css('text-align','center');???????????????
回答by Morgan Wilde
You would be looking at $("img").width()this will give you the width in pixels using the integer format (so if the width is "width: 100px;", this would be "100"). But in order for this to work, every image has to have width=""attribute set, otherwise you'll have an error and no value returned.
您会看到$("img").width()这将使用整数格式为您提供以像素为单位的宽度（因此，如果宽度为“ width: 100px;”，则为“100”）。但是为了使其工作，每个图像都必须width=""设置属性，否则您将收到错误并且不返回任何值。
Two links to check out would be:
要检查的两个链接是：
