javascript - Using jQuery CSS Property to Center an Image - Stack Overflow

admin管理员组

文章数量:1341409

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.

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.

Please provide examples as I not fluent in JS enough to write this myself.

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.

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.

Please provide examples as I not fluent in JS enough to write this myself.

• javascript
• jquery
• css
• image

Share Improve this question Follow edited Jul 16, 2015 at 17:14 L84 asked Feb 14, 2012 at 20:32 L84L84 46.3k5959 gold badges181181 silver badges259259 bronze badges 1

• stackoverflow./questions/623172/… – Yorgo Commented Feb 14, 2012 at 20:40

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 4

What about giving your images a container with text-align : center:

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

Here's a demo: http://jsfiddle/YfFht/

A CSS solution will be good for performance.

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;
}

Use load to detect when image is downloaded. In anonymous function for each one get the width and apply it as a css property.

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

Remove inline styles from the img elements and then try this code on window load event which will ensure that all the resources on the page are loaded.

$(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
        });
    });

});

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:

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

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");
});

This jQuery snippet sets the parent's text-align CSS property to center for all .center images, which I think will acplish the same without setting widths:

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

• DEMO

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.

Two links to check out would be:

http://api.jquery./width/

http://api.jquery./outerWidth/

本文标签： javascriptUsing jQuery CSS Property to Center an ImageStack Overflow