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.

stackoverflow.com/questions/623172/…

Yorgo
– Yorgo

2012-02-14 20:40:49 +00:00
Commented Feb 14, 2012 at 20:40 — Yorgo
– Yorgo, Commented Feb 14, 2012 at 20:40

Jasper · Accepted Answer · 2012-02-14 20:40:28Z

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, 2012 at 20:40

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

L84 Over a year ago

I attempted that and the image was huge! The image was 350px and it rendered at 950px. Ideas? Thoughts?

L84 Over a year ago

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 <img> tag it does not?

Jasper Over a year ago

@Lynda You can set a max-width CSS property for your images so they only grow to a specific size. 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.

krlzlx · Accepted Answer · 2015-07-15 09:15:54Z

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

answered Jul 15, 2015 at 9:15

krlzlx

5,83114 gold badges51 silver badges60 bronze badges

Comments

mrtsherman · Accepted Answer · 2012-02-14 20:38:51Z

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, 2012 at 20:38

mrtsherman

40k23 gold badges90 silver badges111 bronze badges

2 Comments

Jasper Over a year ago

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.

mrtsherman Over a year ago

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.

ShankarSangoli · Accepted Answer · 2012-02-14 20:39:15Z

1

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

});

answered Feb 14, 2012 at 20:39

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Comments

JamieL · Accepted Answer · 2012-08-15 16:47:56Z

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, 2012 at 16:47

JamieL

5,8111 gold badge22 silver badges10 bronze badges

Comments

Jim Jeffers · Accepted Answer · 2012-02-14 20:40:06Z

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, 2012 at 20:40

Jim Jeffers

18k4 gold badges44 silver badges52 bronze badges

Comments

calebds · Accepted Answer · 2012-02-14 20:54:27Z

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, 2012 at 20:54

answered Feb 14, 2012 at 20:44

calebds

26.3k9 gold badges51 silver badges75 bronze badges

Comments

Andrew · Accepted Answer · 2012-02-16 21:46:06Z

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, 2012 at 21:46

Andrew

13.9k14 gold badges70 silver badges85 bronze badges

answered Feb 14, 2012 at 20:44

Morgan Wilde

17.5k12 gold badges55 silver badges103 bronze badges

Collectives™ on Stack Overflow

Using jQuery CSS Property to Center an Image

8 Answers 8

3 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

3 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related