Using jQuery CSS Property to Center an Image

Question

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.

http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript — Yorgo, Feb 14 '12 at 20:40

score 4 · Accepted Answer · answered Feb 14 '12 at 20:40

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.net/YfFht/

A CSS solution will be good for performance.

answered Feb 14 '12 at 20:40

Jasper

75,717
14
151
146

I attempted that and the image was huge! The image was 350px and it rendered at 950px. Ideas? Thoughts? – L84 Feb 14 '12 at 21:02
Nevermind - There was some conflicting code I missed. It works. Thank You. Now Question - Why does this work for images (`text-align: center` when it is in the above format when if you put it inside the `` tag it does not? – L84 Feb 14 '12 at 21:12
@Lynda You can set a `max-width` CSS property for your images so they only grow to a specific size. https://developer.mozilla.org/en/CSS/text-align. See the **Summary** in this link: `text-align does not control the alignment of block elements itself, only their inline content.`. That's just how `text-align` works. – Jasper Feb 14 '12 at 21:30

score 2 · Answer 2 · answered Jul 15 '15 at 09:15

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

score 1 · Answer 3 · answered Aug 15 '12 at 16:47

1

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.com/bl-jquery-image-center/

answered Aug 15 '12 at 16:47

JamieL

5,573
1
18
9

score 1 · Answer 4 · answered Feb 14 '12 at 20:38

1

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

answered Feb 14 '12 at 20:38

mrtsherman

39,342
23
87
111

1

Make sure you bind to the images before any of them have loaded. Or alternatively run the code when `window.load` fires so you know all the images are available to get their dimensions. – Jasper Feb 14 '12 at 20:41
As Jasper mentions, you could use window.load and then bind with `$('img').each( function...` instead. If you placed my code in a `window.load` the code would never fire because the resources have already loaded. – mrtsherman Feb 14 '12 at 20:58

score 1 · Answer 5 · answered Feb 14 '12 at 20:39

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

});

score 0 · Answer 6 · answered Feb 14 '12 at 20:40

0

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

answered Feb 14 '12 at 20:40

Jim Jeffers

17,572
4
41
49

calebds · Answer 7 · 2012-02-14T20:54:27.403

0

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

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

DEMO

edited Feb 14 '12 at 20:54

answered Feb 14 '12 at 20:44

calebds

25,670
9
46
74

score 0 · Answer 8 · edited Feb 16 '12 at 21:46

0

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.com/width/

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

edited Feb 16 '12 at 21:46

Andrew

13,757
13
66
84

answered Feb 14 '12 at 20:44

Morgan Wilde

16,795
10
53
99

Using jQuery CSS Property to Center an Image

8 Answers8